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Welcome 


Blow away the cobwebs... 


Create images that download quickly and look fantastic. 
Photoshop and ImageReady have all the tools you need... 


P utting any kind of imagery online isn’t as easy 
as just finding some webspace and uploading it. 
Web designers face a constant challenge to display 
graphics at the best possible quality while keeping the 
file size of their pages low. It’s a top priority — after all, 
you don’t want visitors to your web site waiting too 
long for the pages to download. 

So thank heavens for Photoshop and its web content 
colleague ImageReady, which have a raft of options and 
features for ensuring your images are delivered at 
maximum speed and that they look awesome! These 
closely-linked programs can deal with every kind of 
image, from large top-quality illustrations to simple 
buttons and logos. Whatever you throw at them, it will 
come out the other side looking as good as ever, but 
with a file size suitable for any net connection. 

Photoshop’s web tools aren’t just about squashing 
your images’ file sizes. They also make it easier than 
ever to add all sorts of bells and whistles to your pages, 
such as rollover buttons and image maps. You can then 
export these to your web authoring software, slotting 
them into your pages with the minimum of fuss. 

Throughout this Focus Guide we’ll show you just 
how easy it can be to create images that really work in 
an online context, and how to create extra elements that 
will add some serious style to your site. 
All the files you need to follow our 
tutorials can be found on the 
bonus CD-ROM, as well as 
illuminating video 
lessons and a trial 
version of Adobe’s 
top web building 
software, GoLive. 

Let’s get going... 
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We recommend that you always maintain 
an up-to-date backup of your hard disk data. 
Future Publishing does not accept any 
responsibility for disruption, damage and/or 
loss to your data or computer system that 
may occur while carrying out procedures 


described in this publication. 


Icons Explained 


Finding your way 


Our handy icons hold the key to a wealth of 
additional information. Here's what they all mean... 


\ N } ith so much ground to 
cover on the vast subject of 
Web Imagery in this Focus Guide, 
it’s been hard work fitting 
everything in. That’s why you’ll find 
the special icons that occupy the 
margins on each page so useful. 

As you leaf through the pages, 
you'll find a range of eye-catching 
symbols, each of which indicates an 
extra nugget of knowledge. The 
icons enable you to identify exactly 
what kind of information you’re 
dealing with — for a guide to icon 


On your CD-ROM 


categories, see below. These handy 
hints and tips are always relevant 
to the topic that’s being discussed, 
and will help you develop your 
Photoshop skills that little bit faster. 
Our writers are always experienced 
Photoshop experts who regularly 
contribute to our sister magazines, 
such as Computer Arts, Computer 
Arts Projects and Digital Camera 
Magazine. So you can rest assured 
that all the information they provide 
is both authoritative and thoroughly 
tried and tested. 


Take note 


Tutorial files, trial software and more besides is 
included on your CD-ROM. Every now and then 
we remind you of this by flagging up the disc icon 
and listing what's on it. Handy, eh? 


Top tips 

This indicates an expert tip. Anything sheltered 
beneath this icon is guaranteed to reveal a useful 
tip, or advice about Photoshop's range of tools, 
options and features for web images. 


Further information 

We'd like to tell you absolutely everything, but 
there's just not enough space. Instead we refer 
you to other useful resources, such as websites 
and specialist books for further reading. 


Shortcuts 

Carrying out common tasks again and again can 
get alittle tedious. Our handy shortcuts show you 
how to carry out these tasks with a few deft 
key-presses, saving you lots of time and effort. 


SSD 


You'll find a number of these nuggets of knowledge 
scattered throughout the Guide. They're crammed 
with useful information that complements the 
main text perfectly. 


Watch out! 

The ‘skull and crossbones’ sign means proceed 
with caution. You'll find some important points 
outlined below this icon, which you should 
certainly take seriously. 


Links 

When we refer to a website, we may pull out the 
web address in the sidebar to make it easier for 
you to read and remember. 
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In this chapter... 


O Find out when to use 
the .JPG format 


D1 Discover the options 
available to .GIFs 


O) Learn about the less- 
common .PNG format 


Oo Optimise your images 
for display on the web 


DO Learn about web-safe 
colours and fonts 


O Find out about 
copyright issues 


WEB GONCEE TS 


WITHIN 


PHOTOSri@P 


Despite its origins as a photographic tool, 
Photoshop has evolved into the Swiss Army 
knife of production tools with strengths for 
all kinds of media, including web design... 


P hotoshop has long been known 
for offering key features to 

all kinds of creative artists, from 
photographers to graphic designers 
and — thanks to the all-new CS 
version — those working in video 
production. Web designers are also a 
core user group, especially since the 
release of version 5.5 in 1999. This 
release ushered in key features for 
web designers, such as the Save for 
Web feature and integration of 
ImageReady into the package. 

But before we jump straight in to 
examine just how useful these tools 
can be for creating online content, 
it’s important to understand a few 
crucial concepts inherent to the 


medium. In short, we need to 
understand the the limitations of 
web-based work, before we can 
create effective online content. 


Understanding HTML 

Web sites can include a wide range 
of media formats, including video, 
audio and animation, but the core 
foundation for any web page is its 
text and graphical content. 

A web page is effectively a regular 
text file that contains tags defining 
the HTML mark-up language, which 
is then saved with a .htm or -html 
extension instead of .txt. HTML is a 
very easy language to understand, 
because its content is formatted by 


ait 


Page 12 Discover what kind of images 
can be displayed through your website 


Page 13 For photo-real imagery you'll 
need to know how the JPG format works 


Page 16 It’s all a question of size - 
the smaller your image files the better 


surrounding it with bracketed tabs. 
For example, <B> would indicate 
text to be rendered in bold type. 
These tags are generally presented in 
pairs with the closing tag defined by 
a forward-slash. The following code, 
for example, translates the word 
‘web’ into bold text: <B>web</B>. 
To embed an image into a web 
page all that’s necessary is a line 
of code that tells the web browser 
where the image file is located, 
with related attributes that reveal 
its dimensions and positioning. 


Streamlining images 
However, as anyone with even the 
slightest experience of using the 


Page 17 Ensure your colours and fonts 
will be available as you intended 


internet will know, the delivery of 
web-based content is influenced 
greatly by the ‘bandwidth’ of the 
internet connection on which it’s 
viewed. It’s therefore important to 
understand which types of image 
work best online and how to prepare 
your images for delivery. So before 
we dive into Photoshop’s deep end, 
we need to get to grips with some 
basic concepts, which we’ll look at 
over the following pages. We’re 
using Adobe Photoshop 7.0 as the 
basis for this Focus Guide but many 
of the options and features that we 
cover will be relevant to earlier 
versions, as well as the very latest 
CS release. 


Page 14.GIF files can be transparent or 
animated, and are best for simple images 


Page 19 Present your artwork to the 
world, but protect your copyright 
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Chapter 1 


File formats 


Vector animations 
SWF files can only be 
effectively created within 
Macromedia Flash itself. 
Photoshop has no direct 
support for the vector 
format, although 
ImageReady CS can export 
to the format. Your files can 
then be imported into the 
animation package. 


Alternative text 

The majority of a web page's 
copy should be rendered as 
regular HTML text, although 
graphics can be used to 
create titles. If you choose to 
use graphics for some text 
elements, make sure you 
include alternative text 
titles from within your 

web building software. 

This makes the graphic 
identifiable and accessible 
to users who may require 
screen readers. 


Focus Guide — Apose PH 


Knowing what kinds of images work 
best within a web page is crucial... 


D espite the huge number of 
image formats available to 
Photoshop, there are effectively 
only two kinds of image that can be 
used within a web page. The .JPG 
and .GIF format are by far the most 
commonly used, although .PNG is 
also supported. We’ll look into these 
in turn during the next few pages. 
There are alternative methods of 
embedding visual elements into a 
web page. For example, you could 
make use of Macromedia Flash to 
create animated content in the SWF 
format. But generally speaking, 


WEB GRAPHIC FORMATS 


Atypical website will use graphics not just for 
illustration, but also to define the general look 
and feel of the site. 

when you see an image displayed 
on the web it’s more than likely to 
be in the .JPG or .GIF format. 


) THE JPG format is one of the main image formats used on the web 
for displaying imagery, such as photographs or more complex design 


elements with variable tone. 


— .GIF Is used for flatter images that tend to contain solid colour or text. 


It has the advantage of supporting transparency and animation options. 


THE «PNG format was introduced to replace the .GIF format but, 


although it provides a number of advantages, it never really took over 
the mantle from its more established rival. 


| BASIC ANIMATIONS may be contained within animated .GIFs, but more 
complex vector animations can be presented via the Flash SWF format. 


| THERE ARE a handful of other methods of including imagery in web 
pages, but these will generally rely on plug-in technologies and should 
be avoided for routine design elements. 


Essential Back 


ground Knowledge 


The JPG format 


It's the most popular image format on the web, 


So it's important to realise when to use it 


wins with the .GIF format 
which we'll look at overleaf, 
the .JPG format accounts for the vast 
majority of the graphic content 
found online. Both have their 
particular strengths but the .JPG is 
the one to use for imagery that’s 
composed of a wide range of 
colours and detailed graduations, 
and particularly for photographs. 
The .JPG format complements 
the strengths of the .GIF format, 
because its compression methods 
allow far more complex images to 
be successfully reduced in file size. 


Lots of data is removed from the 
image, but the content that’s left 
behind is still easily recognisable 
to the human eye. 

This ‘lossy’ method of 
compression means that images 
inevitably lose a little quality, but 
the format has the advantage of 
supporting variable levels of 
compression to get the most 
balanced results. Nonetheless, if 
you're saving a file as a .JPG, be 
sure to save the output as a new file, 
otherwise your original high-quality 
file will be overwritten. 


COMPARING .JPG To .GIF 


Nothing squashes a photographic image like a JPG 


Although the .GIF format is capable of rendering more 


complex imagery, doing so will generate much higher file 


sizes when compared with .JPG.The variations shown here 


look identical, although we've managed to get this 300x225 


pixel image down to little over 6kb as a JPG, compared to 
just under 43kb for the .GIF. Although the final size of both 


images is very low, you shouldn't forget that a complex page 


will often contain multiple images, which can slow down the 


delivery of your page if the correct compression methods 


are ignored. We could reduce the .GIF further, but this would 
result in reduced colour content and a marked loss in quality. 


Strike a balance 
Although the JPG format is 
ideal for photographic 
content and some incredibly 
small file sizes can be 
achieved, you'll need to be 
careful when reducing 
imagery. The most obvious 
sign of over-compression is 
the appearance of a 

halo effect around any 
apparent edges, so keep 

an eye out for these and 
alter the compression 
settings accordingly. 


There is little difference in quality 
between the upper JPG and lower 
-GIF versions, other than the file size 
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Indexed colour 

To fully appreciate the 
savings to be made in the 
.GIF format in terms of file 
size, the exported image 
needs to be indexed. This 
involves embedding colour 
information into the graphic 
to determine the range 

of options available. 

By indexing the file, 
unnecessary colour data is 
removed to create the 
optimised image. 


Graphics Interchange Format 


For images that contain flat colours and sharp 
contrast, the .GIF is the format of choice 


'E he .GIF format makes the 
perfect foil for the JPG, 
because the LZW compression 
method it uses is more suited to 
larger regions filled with fewer 
colours, such as the typical web 
button or title graphic. 

.GIF compression works by 
cleverly abandoning colours from 
the image’s final image colour table 
to reduce the file size without 
adversely affecting the image 
quality. With certain image content 
it therefore becomes possible to 
bring the colour content right down 


.GIF87A oR .GIF89A? 
So you thought a .GIF was a .GIF? Think again... 


CompuServe developed the original .GIF specification - 
.GIF87a- in 1987, but the updated .GIF89a came along just 
two years later. The newer format has now taken over to the 
degree that most graphics programs will now default to the 
more flexible 89a version, which supports transparency, 
animation and ‘interlacing! Interlacing is a useful feature for 
web graphics — especially if you're using a slow connection — 
because it allows a low-resolution version of an image to be 
seen while the full image loads. Animated .GIFs cannot be 
made using Photoshop itself, but we'll look at their creation 
using its built-in sister application, ImageReady, in chapter 8. 
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to four or eight colours, stripping out 
any unnecessary data to leave only 
those required by the image content. 
One additional advantage of the 
format over its JPG cousin is its 
ability to support transparency, 
which helps to blend a .GIF image 
into the background of a complex 
web page. However, to achieve this 
convincingly you’ll need to consider 
the ‘matting’ around the pixel 
content, which helps blend the 
subject into its background. We’ll 
look at this on page 34, when we use 
Photoshop’s Save for Web feature. 


The newer version of the .GIF format 
makes it possible to use transparency 
within online graphical elements 


Essential Background Knowledge 


Portable Network Graphics 


The new kid on the file format block is still 
nowhere near as popular as its rivals... 


T he Portable Network Graphic 
format (.PNG), pronounced 
‘ping’, was developed as a patent- 
free alternative to the .GIF file type 
back in 1995, when CompuServe 
and Unisys, who developed the older 
.GIF format, decided to enforce 
royalty payments on applications 
that implemented the LZW 
compression method. 

As a result the .PNG format 
emerged but, despite showing many 
advantages over the older method, 
has only enjoyed marginal success. 
In contrast to the 8-bit .GIF, .PNG 


-PNG LIMITATIONS 


It’s not all as good as it sounds... 


Despite the obvious benefits behind the .PNG format, there 


supports both 8 and 24-bit images, 
resulting in a format that enjoys the 
advantages of both .JPG’s colour 
depth and .GIF’s lossless 
compression processes. 

These variants became known as 
-PNG-8, which compares with the 
older .GIF format while the .PNG-24 
method has closer ties to the JPG. 
The latter results in a noticeably 
larger files size for exported files, 
but has a distinct advantage over 
both .JPG and .GIF formats through 
its support for up to 256 levels of 
transparency within an image. 


«PNG 

The Portable Network 
Graphics format was 
developed as an 
Open-Source project. 

For more information 
about the format take 

a look at this site: 
www.libpng.org/pub/png 


are some issues you should be aware of before making 


extensive use of it.The format generally creates marginally 


larger file sizes when compared to .GIF, although this in itself 
is negligible. The main issue related to the format however is 
browser compatibility. If you know that some of your site’s 


audience is using web browsers prior to the 4.0 generation, 


then you'll run into problems — these older browsers simply 


will not recognise the newer format. However, as the vast 
majority of users are now using sixth-generation browsers, 
the problem is becoming less apparent. 


.PNG-8 files are comparable to .GIF. 
Here the .GIF version weighs in at 
2.9kb and the .PNG file at 3.3kb 
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What is image optimisation? 


How big is too big? 

You need to consider that 
aweb page often contains 
multiple images, all of which 
increase the potential 
download time for your 
page. Keeping the overall 
combined file size to below 
50kb would be ideal, 
although an upper limit of 
100kb should be thought of 
as a ceiling for your content. 


Creating images of the highest quality while 
keeping the file size low is imperative online 


E he phrase ‘image optimisation’ 
is often mentioned when 
creating graphics for use on the 
internet, and without due 
consideration you run the risk of 
creating image files that are too 
large to be delivered effectively. 
Generally, what is implied is a 
simple reduction in image quality to 
dramatically reduce the file size of 
an image. This make your assets 
faster to download, meaning they 
will reach the viewer’s screen with 
minimal disruption or delay. 
Fortunately, since Photoshop 5.5 


IMAGE RESOLUTION 


and the introduction of the Save for 
Web feature, the optimising process 
has become so simple that all the 
hard work is done for you. No need 
for complicated algorithms — the tool 
converts your imagery to the best 
settings with just a little assistance. 
We’ll be looking at the Save for 
Web feature in more detail 
throughout Chapter 3, which is 
dedicated to this labour-saving tool. 
Remember the basic concepts of 
whether an image is more suited to 
the .GIF or .JPG format and half the 
job will already be done for you! 


Reduce your images by lowering the number of pixels per inch 
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Just as compression methods and colour content can affect 
an image's file size, so too can the resolution it supports. If 
you're working in print you should be outputting your work 
at around 300dpi, but this is too detailed for online viewing. 
The typical monitor can only render images at 72dpi, so 
anything above that will only bloat your file size. As well as 
providing smaller file sizes, a lower resolution also ensures 
that people can't hijack your images for printing. Again, Save 
for Web will automatically reduce the resolution for you, but 
by working directly within the constraints of the resolution 
you'll get a better idea of how your final designs will appear. 


You can manually change the 
resolution of an image through the 
Image > Image Size dialogue settings 


kground Know 


Web-safe colours 


Make sure your colours appear as intended 
across all browser and platform combinations 


Act crucial factor to 
consider when planning your 
online design is how accurately your 
colours are represented to the end 
user. There are certain advantages 
with designing for screens rather 
than print, not least that you can see 
how your layout will appear without 
worrying about resolution issues and 
colour modes. However, there are 
also problems raised, because you 
can’t control the circumstances in 
which your site will be viewed. 
Different browsers, versions and 
computer platforms have a different 


WEB-SAFE FONTS 


understanding of colour profiles, 
which can greatly influence your 
site. You may have your graphics 
card set up to display millions of 
colours, but what happens when 
somone tries to access your site 
using the basic 256-colour palette? 
In such instances, the browser will 
attempt to recreate colours that fall 
outside its range by ‘dithering’ 
colour — invariably resulting in ugly, 
speckled results. To counter this 
keep the Only Web Colours option 
checked in Photoshop’s Color Picker 
and use only the colours on offer. 


Dithering 

Dithering is used when a 
colour contained within an 
image falls outside a 
computer's colour range. 
To counter this, the nearest 
colours either side of the 
problem colour will be 
rendered ina pixel-sized 
chequerboard to attempt 
to trick the eye into 

seeing what was 
originally intended. 


HTML text can only be rendered using certain typefaces... 


Just as you should aim to keep colours consistent across 


various browser/platform combinations, so too should you 


think about text. It's no good designing an HTML page 


using a fancy hand-scripted font if you are the only person 


with the font installed. Web browsers recreate HTML pages 


by making use of the fonts present on the viewer's system. 


So keep things simple by designing HTML text using Arial, 


Verdana or Geneva for san-serif fonts, Times Roman and 


Georgia for serif copy and Courier for monospace text. 
Any text outside of these base fonts should be converted to 
a graphic format first, but limit this to titles and headers only. 
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Keep in mind that your regular text 
should be created using a font that’s 
available across multiple platforms 
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Anti-aliasing explained 


Bewildered by blocky pixels? Let anti-aliasing 
fill the gaps and smooth things over for you. 


Bi 


it’s inevitable that curved shapes 
may appear a little blocky. Graphics 
applications will generally get 
around this using ‘anti-aliasing’. 
Using this method blocky areas are 
filled with coloured pixels that blend 
the foreground and background 
colours, tricking the eye into seeing 
a smooth curve. 

The effect is automatically applied 
to graphic elements in most cases, 
but when working with text you have 
the option of using various degrees 


Removing anti-aliasing 
There may be occasions 
when you are givenan 
image that already has 
anti-aliasing applied, but 
for a different colour 
background than you 
require. In such a case you 
can make use of the Layer > 
Matting > Defringe option 
to shave outlining pixels 
from your image. 


itmap imagery comprises of 
individual square pixels, so 


CONTROLLING ANTI-ALIASING 


Anti-aliasing shows up around the edges of the 
bottom file as a red fringe, which has been 
determined by the Matte options in Save for Web 


of anti-aliasing. You can recreate the 
appearance of HTML text in your 
designs by switching anti-alising off. 


Es The Anti-aliasing options 


for the Text tool can be found 
toward the bottom-right of 
the Character palette. 


With anti-alising switched 
off you can use Photoshop 
to emulate your final HTML- 
based text. Just remember 
that it should be created 
using a web-safe font. 


ea The remaining options will 


apply anti-aliasing to varying | 
degrees, which is better 
suited for text that will 
ultimately be converted into 
a graphic, such as page titles, 
headers and soon. 
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| an appearance that cannot 
| be replicated by your 


Here you can choosea | 


web-safe font from which 
to mock up text that will 
ultimately be code. Choose 
the None option from the 
Anti-aliasing options. 


| When done correctly, you iz 


can easily add text to graphic 
elements such as buttons or 
site navigation to remain 
consistent with HTML text. 


With anti-aliasing applied ea 


the end result may take on 


browser effectively. 
—————— 


Protecting 


Copyright issues are important to all artists, 


but online limitations will help you sleep easier 


[' youre planning to present your 
own photography or artwork 
online, you'll undoubtedly be aware 
of issues regarding the protection of 
your work. Copyright is a sensitive 
subject and you don’t want just 
anyone to download and use your 
work without getting your rightful 
recognition or payment. 


Fortunately, the limitations of the 
internet as a means of delivering 
such material make it very difficult 
to present anything of much use. 
As long as you make note of a few 
common sense details you won’t 


their wares online to pick up some tricks 
protecting your own web-based work 


without your permission. 


REASONS NOT TO WORRY 


Take note of how stock image libraries present 


on 


have to worry about finding your 
work plastered across billboards 


“| THE 7 2DPI resolution at which your images are available online is far 


too low to be successfully used in print. A higher resolution is wasted 


online and will lead to increased image file sizes and slower downloads. 


| THE PHYSICAL dimensions of a typical web graphic is too small for 


anything other than screen-based design. As long as your image gives a 
reasonable indication of the quality, then leave reduced versions online 


your images online 


Right-click myth 

One of the quickest ways to 
save an online image is via 
your right mouse button. 
To counter this, many sites 
make use of JavaScript to 
disable the normal right- 
click menu. However, 

this isn’t a very effective 
method: if you can see an 
image it can still be copied 
via a screen grab or from 
your browser cache. 


Browser cache 

Aweb browser contains a 
folder in which are stored 
temporary copies of web 
pages and images that 
you've visited online. 

This speeds up the browsing 
process by presenting local 
versions of such files instead 
of downloading duplicates. 


and encourage users to contact you if they really need full-size originals. 


(| ADDING A watermark over larger images provides a simple method of 
making your online images useless to anyone other than yourself. Check 
out stock image library websites to get some idea how this can be done. 


(OIF YOU’RE still nervous about the prospect, then consider subscribing 
to services such as Digimark, who will monitor copies of your images. 
Check out the Filters > Digimark option to get started. 
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OP CREATING. 


INTRODUCING 
PFICTOSHOP'S 
WEB TOOLS 


Photoshop provides a number of tools and 
features aimed specifically at the web designer. 
There's not quite as many as you might expect, 
but then there's a good reason for that... 


A you might expect from a 
program called ‘Photoshop’, 
the core strengths of the application 
lie in working with photographs and 
other bitmap imagery. However, over 
the years and from version to 
version, new features were quick to 
attract a wide-ranging user base that 
now extends far beyond its original 
target audience. 

Graphic designers, print bureaus, 
video producers, in fact anyone who 
has anything to do with bitmap 
imagery has now found their own 
uses for the program. Adobe has 
managed to cater for them all, 
without making the software too 
complex for any specialised group. 


Photoshop for web designers 
And of course, web designers are no 
exception, but it wasn’t until 
Photoshop 5.5 was released — in the 
middle of the web design ‘gold rush’ 
— that the program made itself more 
available to screen-based designers. 
The additions to this version weren’t 
as apparent as you might expect. 
The only addition was a solitary new 
tool, plus a small collection of 
related features that were arguably 
of more interest to the casual user 
rather than the pro web designer. 
The reason for such reluctant 
change within Photoshop is clear 
when you think back to the large 
user base the software has attracted. 


Basic Tools And Techniques 


Page 22 Get to grips with the Slice tool 
and how it can speed up page cropping 


Page 23 Creating slices is one thing, but 
yeu need to be able to modify them too 


Page 25 Fora better understanding 
of the Slice tool, we'll slice up a layout 


| 

_ 
| 
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Page 26 Discover Photoshop’s tools 
for creating a quick web photo gallery 


Integrating animation and mapping 
tools directly into Photoshop may 
have lead to confusion for print 
designers and photographers who 
have no need for such features. 

So, Adobe made the decision to 
group such specific tools together in 
the associated ImageReady program, 
providing web designers with their 
own dedicated environment to 
complement that of Photoshop. 


ImageReady, steady, go! 

We’ll be looking increasingly toward 
ImageReady throughout this book, 
but before we run ahead of ourselves 
let’s return to Photoshop itself and 
take a look at what’s available within 


abe 27 Create your own gallery 
without knowing anything about HTML 


Page 28 Display your images at high 
resolution online with ZoomView 


the main application. The new tool 
that we mentioned provides slice 
options for dissecting our artwork, 
while some of the other features 
include more automated processes 
such as the Web Photo Gallery and 
ViewPoint Zoom View options, 
which we’ll examine later. 

The other key addition to 
Photoshop which has proved itself 
a valuable feature to more than just 
web designers is the Save for Web 
option. This is such a feature-rich 
tool that we’ll be looking at it in 
more detail throughout Chapter 3, 
but first let’s take a look at what 
tools and features Photoshop 
provides in its main interface. 
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Cutting it with the Slice tool 


Foreground 

or background? 

Just as the Slice tool will 
break up your image, so too 
will it help with more 
complex design layouts as 
you determine which 
elements of a page should 
become background or 
foreground elements. You 
may want to embed an 
image into the background 
of the holding table so you 
can layer HTML text on top, 
for example. 


Over the years the Slice tool has remained 
a mystery to many, but not for long... 


l ploading and embedding large 
images into a web page is 
never a good idea. Large images will 
have larger file sizes that take longer 

to download; and if your web 
audience is kept waiting too long 
for your content, then they may be 
tempted to hit the Back button and 
try another site. 

If your image files look bulky, 
think about chopping your layout 
into smaller parts that will download 
individually — this is where the Slice 
tool comes into effect. Making use 
of the tool will divide your page into 


RECOGNISING THE SLICE OPTIONS 


The options bar for the 
regular Slice tool contains 
some basic tools, including 
the ability to constrain the 
tool dimensions to fixed or 
relative sizes. 


Don 
a 


The Slice tools are grouped 
together next to the related 
Crop tool from the main 
Photoshop toolbar. Defining 
slices is like creating multiple 
crop regions. 


The title graphic here, for 
example, would be better 
suited as a.GIF, while the 
photographic imagery would 
work best as a JPG. 
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Creating slices is as easy as using the Crop tool. 
Keeping the View > Snap option ticked will keep 
the boundaries your slices create toa minimum 


manageable chunks and ensure that 
your layout fits together perfectly 
when uploaded as a web page. 


If you create a page layout 
by using regular Photoshop 
guides, you then have the 
handy one-click option to 
create slices from these 
original guides. 


Slices can reduce the 
download speeds of your 
images, as well as determine 
different compression 
methods for the individual 
graphics the slices define. 


When slices are created 
you'll be able to differentiate 
between the different regions 
within the layout, as each will 
be clearly visible. 


Basic Tools And Techniques 


The Slice Select tool 


Grouped with the regular Slice tool is the 
Slice Select tool for modifying existing slices... 


O nce you’ve defined your slice 
regions you'll probably need 
to give them a few tweaks, which is 
where the Slice Select tool comes 
into play. Using this tool enables you 
to click on a slice to select it, then 
make adjustments to the anchor 
points that appear around it. 

This way you can rearrange the 
sizing and dimensions to fine-tune Accessing the options for each slice gives you 
your layout before exporting the the chance to add and edit attributes such as 
final settings asa complete web the URL details if the image is to become a link 
page. If you’ve ever used the regular _ options for this tool are located in 
Crop tool you will feel quite at its Options bar and some of the 
home with Slice Select. The main trickiest are outlined below. 
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SLICE SELECT OPTIONS 


(CLICKING THE Slice Options button opens a dialogue box that allows 
you to configure the slice type and any attributes you wish to associate, 
such as the web address for any links and alternative text. 


_| CONVERTING AN automatically generated slice to a user slice prevents 
it from being changed when you reorganise your slice structure. This 
option is only available with auto slices, which can be determined by 
their greyed out appearance. 


— IF YOU NEED consistent results when slicing large images you may opt 
to use the Divide Slice feature, which enables you to determine the 
number of slices and their dimensions for horizontal or vertical slicing. 


“| CHOOSING TO ‘Hide Auto Slices’ enables you to concentrate on more 
important aspects of your page layout. When hidden the option button 
toggles over to become a ‘Show Auto Slices’ function instead. 
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Lateral thinking 

If you're attempting to resize 
aslice that edges onto 
another, you'll find those 
boundaries will also be 
moved. However, on some 
occasions you may find it 
impossible to resize a slice 
without making 
adjustments to those 
surrounding the slice 

in question. 


Accessing options 
Modifying a slices options is 
common task you'll come 
to perform — as well as 
accessing them through the 
Slice Options button within 
the Options bar you can also 
bring these up using the 
more convenient method of 
double-clicking directly on 
the relevant slice. 
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Slice types 


No image 

text formatting 

Ifyou define a slice as the 
‘No Image’ type you can still 
embedd HTML text into the 
cell. Enter the appropriate 
copy into the field that 
becomes available in the 
Slice Options dialogue. 
Raw HTML entered into this 
field will be recognised and 
give you a headstart when 
further modifying the 
exported page. 


Understanding the variations in slice types 
will help you create more useful end results... 


\ ,\ ] hen you use the Slice tool 
you'll notice that any 

selections you make automatically 
affect the surrounding area. This is 
because your slices need to be 
recreated within an HTML table, 
which is built around a basic grid. 

Regions that you specifically 
define are made available as User 
Slices, while those created to 
accommodate your defined regions 
become Auto Slices. The difference 
between the two being that only 
User Slices can be selected and 
modified using the Slice Select tool, 


SLICE AND BACKGROUND TYPES 


while Auto Slices will simply adapt 
to any changes you decide to make. 
The logic behind this is to protect 
your original slices from being 
inadvertently modified, and although 
this may cause initial confusion 
you’ll soon come to appreciate the 
principle. In fact, the method allows 
you to create much more efficient 
graphic components from your 
layouts with minimal effort, as you 
can simply drag selections over the 
key regions of your image and leave 
Photoshop to figure out the best 
HTML layout for the table to adopt. 


Reduce file size by controlling your page’s background content 


Once you've created your slices you can access the Slice 


Options to determine the Slice Type and Background Type. 
The Slice Type options allow you to choose whether or not 
the slice content will be graphical, while the Background 
Type lets you decide on a background colour to be used for 
any transparent areas of a graphic slice, or to determine the 
HTML colour code needed to fill the background of a 

‘No Image cell. Setting a slice type to'No Image’ is a great 


way to reduce the file size if you have large areas of flat - — 

Defining a cell as a‘No Image’ slice 
type allows us to determine the HTML 
background colour of that cell 


colour. Using this method bypasses the creation of a graphic 
and associates regular HTML attributes to the cell. 
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Using the Slice tools 


Get to know the Slice tools by putting theory 
into practice. It's nothing to get cut up about... 


fT] Open the paragon.psd file from the CD 
and make sure you can see the existing 
layout via the View > Show > Guides submenu. 
Making sure also that the View > Extras option 
is checked, as this will give you a starting point 
from which to create your slices. Use the 
regular Slice tool to create a selection around 
the name of the quartet; the rest of the layout 
inherits auto slices to match your selection. 


Next, create slices around each of the 
navigation items by using the existing 
guides as a basis for your selections. Keeping 
the slices close to the actual text will help 
make the relevant link graphic more apparent 
when it’s used as an actual page, so leave the 
space above each navigation element clear to 
leave a longer auto slice between the main 
image and the actual navigation buttons. 


Once you've completed slicing each 
navigation item the basic structure is 
complete. The latter regions will contain links 
to other pages within our site, and we should 
determine locations for these links before 
exporting the page. Choose the Slice Select 
tool and double-click the About slice. In the 
dialogue you can now enter the link details 
and repeat for the remaining navigation slices. 


The empty slice above the navigation 
need not be converted to a graphic — 
doing so would only slow down the page's 
delivery. Instead we'll define a background 
colour. Use the Slice Select tool again to 
double-click on the region. In the Slice Options 
dialogue choosing ‘No Image’ from the initial 
Slice Type list, then White from the Slice 
Background Type drop-down. 
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Paragon.psd 

Copy the paragon.psd file 
from the CD for a basic 
flattened page layout, 
complete with initial guides 
that we can use to explore 
the way the Slice tools work. 


Snap-tastic 

Keep the View > Snap and 
the View > Snap to > Guides 
options checked and you'll 
find the creation of your 
slices becomes a much 
easier task, as new slices 
automatically join onto 
those surrounding them. 
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Automated Web Photo Gallery 


The next step 

Once you've created your 
Web Photo Gallery you 
could just upload the 
resulting files to your 
web server, although 
Photoshop does provide 
fields for you to enter 
specific information about 
each of the images fora 
more personalised result. 


If you want to get your snaps online, but don't 
know much about web design, try this... 


Ao it won’t be used too 
often by professional web 
designers the File > Automate 
submenu contains a neat little 
addition. The Web Photo Gallery 
option may be of interest to anyone 
wanting to display their work online. 
All that’s required to create an 
entire gallery site is to launch the tool 
and configure the dialogue settings 
to automatically create the HTML 


necessary. The tool also converts the 
contained images into thumbnail 
and full-size variations that can be 
uploaded to your webspace. 


THE Wes PHOTO GALLERY INTERFACE 


The tool's dialogue screen 
is headed by several initial 
options. These enable you 
to choose the style of your 


The final results aren't going to win too many 
design awards, but for ease of use the method 
could save some time for personal projects 


All you need is a folder full of 
original images, and Photoshop will 
create your gallery for you! 


The Folders area allows 
you to determine which 
folder on your computer will 
be converted and contained 


generated gallery, enter your 
contact details and choose 
a preferred file extension. 


Choosing a destination 
folder will define where the 
converted HTML and image 
files that your new gallery 
relies on will be saved. 


The Web Photo Gallery 
feature is tucked away under 
the File > Automate list. This 
list also contains a number 
of other related features that 
may be of interest. 


Focus Guipe ~— Ax 


in your generated gallery. 


Choosing one of the 
different styles available 
from the initial Site category 
will prompt a small preview 
of the overall look and feel 
of the style selected. 


The options at the foot of 
the interface allow you to 
further configure individual 
aspects of your generated 
site, with options adapting 
to your initial choice. 
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Create your own gallery 


With a little configuration you can create your 
own gallery, then upload it to your web space 


| 
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fT] Click on File > Automate > Web Photo 
Gallery and you'll see the options for 
your new gallery. Run through the Styles to 
see a preview of the designs available and 
choose one before entering your email details 
and choosing your preferred web extension. 
Use the Browse and Destination buttons to 
choose locations for your original images and 
to specify where your gallery will be saved. 


f?] From within the Options area of the 
dialogue box you can now choose the 
individual components that define your final 
gallery. By default, the Banner is selected, 
which acts as the header to your gallery 
pages. Making any changes to the available 
options here will be reflected in the final 
exported web pages. 


You'll then need to choose the other 
categories available through the drop- 
down list at the head of the Options area of 
the dialogue screen to further configure your 
gallery. Include the dimensions of both the 
thumbnail and full size images, any custom 
colours you want to apply to the HTML and 
whether to add any security content such as 
a copyright statement. 


Once you've finished entering the 
required information and configured 
your gallery, you can hit the OK button and 
leave Photoshop to build your site for you. 

If your source folder has a large number of 
images you may choose to put the kettle on at 
this point, but by the time you get back you'll 
find your gallery is waiting to be uploaded to 
your web server. 
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Before you start... 

To create your own Web 
Photo Gallery you'll needa 
folder of images that you 
intend to include. This is the 
only preparation you'll need 
to make, other than maybe 
creating anew empty folder 
into which your generated 
files should be saved. 


File info 

The caption, title, copyright 
and credits information that 
appear represent whatever 
information has been stored 
in the File Info dialogue box. 
So if there’s no information 
here, you won't have any in 
your gallery either. 
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ViewPoint ZoomView 


\ 


ZoomView gallery 
Appreciating the potential 


With the help of a plug-in you can offer high- 
quality imagery without copyright worries... 


A we mentioned earlier, 
copyright is a sensitive issue 
for many digital artists. But without 


offering your work online you’re 
missing out on a huge audience. 


behind the ZoomView 


feature is best experienced 
for yourself. Take a look at 
the ZoomView gallery to see 
acollection of images that 


Another downside of using the web 
to distribute your work is the kind of 
dimensions and resolution available, 


have been processed and which can further detract from the 
judge for yourself. 5 

www.viewpoint.com/ more subtle detail of your work 
zoorview/sallery.Nimn! should you reduce your images to fit 


the more common browser sizes. 

One way around both copyright 
and sizing issues is to make use of 
the little-known ViewPoint 


BROADCAST LICENSE 


Zoom View feature, which you’ll 
find tucked away under the File > 
Export options. You can use this 
feature to convert an image into 
ZoomView format. With images 
saved in this format, the viewer can 
zoom into the image to see things at 
full detail, without the copyright 
owner worrying about their work 
being used without permission. 

The downside to the method is that 
your website visitors also need the 
plug-in, but it’s still worth 
considering for photographers 
wanting to showcase their work. 


You need to get hold of a license to use the software 


The ZoomView method is provided by a third party, so you'll 
need to obtain a license before you can make any 
ZoomView files available online. The good news is that you 
are eligible for a free license if you are providing your work 
for non-commercial purposes. There are also exceptions for 
commercial websites, which means you too may be eligible 
for a free license if you are using the feature for promoting 
services or to allow your clients access to images for the 
purposes of reviewing proofs and portfolios. If in doubt, 
check the ViewPoint website by clicking on the Get License 
button available within the ZoomView dialogue screen. 


www.viewpoint.com/zoomview 
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Use the free plug-in to view ZoomView 
content from the ViewPoint website 
and view existing galleries 
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Exporting images to ZoomView 


Converting images to the ZoomView format 
involves just a few tweaks to the settings... 


ft] Open the bigben.jpg file in Photoshop 
and head to File > Export > ZoomView 
to access the dialogue settings to configure 
the image. The first choice to make is which 
template to use, before you determine the 
output location for the generated files. 

The Base Name option can be left as it is, 
because this determines a common name 
for the various files that will be created. 


Unless you've already acquired a license 

you can ignore the following field and 
experiment with various image tile options. 
ZoomView technology uses image tiling to 
load only part of a high resolution image that 
the viewer has requested - as our image is 
quite large, a setting of 256 will generate 
better final results. Set the Quality slider to 
high and check the Optimize Tables option. 


Our original image's dimensions are 
1280x960 pixels, but we've decided to 
display the original image at half the size. 
Enter 640 pixels for the width and 480 for the 
ESS y height. Check the ‘Open in Web Browser’ 
Wrath: (60 |pmets Help; (a6bH [ptr | option and hit the OK button for Photoshop 
and ZoomView to create the necessary files 
and present the results in your web browser. 


fs] If you have the ZoomView plug-in 
installed, you'll now have your original 
image visible at the reduced size by default. 
Clicking on the image will automatically zoom 
into that particular area and sharpen the 
image, so the original full size image is 
available. You can move around the image by 
clicking and dragging or zoom back to the full 
view with a single right mouse click. 


BigBen.jpg 

Use the file bigben.jpg from 
the CD to discover how to 
use the ZoomView feature. 
The image contains plenty 
of detail of the famous clock 
face taken with a Minolta 
Al camera, which we can 
appreciate online using the 
ZoomView plug-in. 


Editing ZoomView 
HTML files 

If you transfer your 
converted ZoomView 
images to another page 
you'll need to be sure to 
copy over all the necessary 
code to include the 
containing table, meta 
information and JavaScript, 
on which the feature relies. 
You'll also need to keep the 
file structure relative of the 
native .MZV source files. 
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TEE Sue oles 
WEB FEATURE 
EXPLAINED 


Another addition that has become an essential 
part of Photoshop since version 5.5 is the Save 
for Web feature, which gives you full control 
over the optimisation of your online images 


In this chapter... 


DO Understand the Save 
For Web interface 


O master the .GiF 
and .JPG settings 


Oo Grasp the concepts 
of matting and 
transparency 


Oo Explore the 
additional features 


oO Export sliced images 


hroughout the previous chapter 

we looked at Photoshop’s tools 
and automated features for working 
with content destined for use online. 
But another crucial feature that was 
introduced in the pivotal 5.5 release 
is ‘Save for Web’. This unassuming 
feature is accessed when exporting 
your completed images and offers 
powerful image optimisation tools, 
enabling you to reduce the file size 
of your images for the most efficient 
online delivery possible. 

In the days before Save For Web, 
optimising image files relied on 
trial and error. This might have 
involved reducing the colour palette 
and indexing .GIF files for example, 


or determining the best compression 
settings for JPG files. 


A new method 
Save for Web removes much of the 
guesswork from the conversion and 
optimisation process, as the tool 
presents the user with multiple 
views of the same image, each of 
which has its own settings applied. 
Using this method it’s now possible 
to see how applying certain levels 
of compression will affect an image 
in real-time, as well as providing 
information on the image’s final 
file size and download times. 

The tool also contains numerous 
basic tools for further modifying 


Page 32 Understanding how the tool 
works will streamline your conversions 


=} Slice Type: 


Page 33 Be aware of the different 
settings for various file formats 
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Page 35 Anti-aliasing and matting 
dictate the smoothness of your graphics 


Page 36 Get familiar with Save ForWeb Page 37 Fine-tune your image's colour 
table to reduce the size of your images 


tools; save time and improve workflow 


your work without returning to the 
main Photoshop interface. Many of 
these may already be familiar to you 
by now, but we’ll be looking at these 
in more detail over the coming 
pages, along with methods of further 
modifying your exported images to 
best suit their final destination. 


Preparing your images 

Before you access the Save for Web 
tool you’ll need to make that sure 
your images are just the way you 
want them. If you’re making 
individual graphics, for instance, 
you'll need to be aware of the 
dimensions that your canvas requires 
and crop right into the image as 


Page 39 Create a functional web page 
with no knowledge of HTML necessary 


closely as possible. This is to get 

rid of any excess data that the image 
may contain, as well as ensuring 
that you can position the new 
element within your web page 
without any unnecessary padding 
influencing its position. 

For larger sliced designs this may 
not be quite as important, as the 
entire canvas is eventually divided 
into individual graphics. All the 
same, you'll still need to know how 
to configure your slices then export 
the final layout into individual 
graphics and the necessary HTML 
to put them back together through 
the browser. We’ll let you know the 
best way to achieve this. 
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Chapter 


The Save for Web interface 


Keyboard shortcut 
As any pro web designer 
will be able to tell you, the 
Save for Web feature can 
be quickly accessed using 
[Alt]+[Shift]+[Control]+[5] 
(for PC users) or [Shift]+ 
[Option]+[Command] 
(for Macs) keyboard 
shortcut. They may seem 
long-winded but its well 
worth drilling these into 
your consciousness if you 
use the feature regularly. 


Understand the Save for Web feature 
by looking at its most important options 


O nce you’ve finished working 
on an image or layout and 
want to optimise it for use online, 
you'll need to access the Save for 
Web feature via File > Save for Web. 
This will transfer your image into 
the tool’s interface, from where you 
can make refinements to the 
compression methods that will be 
used to strike the ideal balance 
between file size and image quality. 
Naturally some concessions may 
need to be made, but with a little 
understanding of how the tool and 
its various options work, you’ll soon 


THE SAVE FOR WEB INTERFACE EXPLAINED 


Once your image is prepared, head over to the 
Save for Web feature via the File menu. Here you 
can give the file one last almighty squash 

be designing graphics can be easily 
optimised without an excessive loss 
in image quality. 


ee The tabs at the head of the 


interface provide access to 


These include the original 
or optimised image, along 
with 2- or 4-image views 
for comparing results. 


the different views available. 


| With the 2-Up tab selected | 


are available for further 
manipulating the artwork 


feature’s dialogue box. 


The converted image is 
previewed alongside the 
original in 2-Up view, 
complete with a handy 
summary of any settings 
applied underneath. 


B.... of basic tools 


from within the Save for Web 
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we have access to the 
original image in its own 
window, so we can compare 
our conversion with the 
uncompressed image quality. 


The actual settings are free 


configured through the 
controls available to the 
right of the interface, and 
will change depending on 
your chosen format. 


Acolour table and image reer 


size information is available 
toward the bottom-right of 
the window, which offer 
specific control over these 
aspects of the conversion. 


Compressing JPG images 


Only by recognising the various controls at 
our disposal can we optimise a JPG efficiently 


hen entering the Save for 
Web tool, the first choice 
you'll need to make is the actual 


format for your converted graphic. Quick conversions 
Once this has been selected from the At the head of the Settings 
dr d aT 5 ii area of the Save for Web 
op-down menu you'll notice the dialogue box is a drop-down 
list that contains common 


remaining options adapt accordingly. 
With the .JPG format there are 

relatively few options, with the 

Quality the most important. With a 


settings across the various 
web graphic formats. 
Choosing from these 
options will often provide 


a 2 With the JPG format chosen as the preferred more fe-than-adequate results 
setting of 30 (or medium) you'll find — export format, the options adapt to make without: any manual 
relevant settings available configuration necessary. 


a decent balance between quality and 
file size. You may opt to raise this for — especially with images of larger 
more detailed images, but keep a dimensions, which can soon increase 
close eye on the anticipated file size dramatically if you’re not careful. 


JPG SETTINGS 
= ra ca Download times 
_| THE QUALITY option determines the amount of compression applied Keep aneye on the 
iy ‘, fey i Sle ci summary information at the 
a high setting means better quality images at the expense of file size. eStart preticw to Get 
The circle icon to the right allows you to apply selective compression. some idea of the anticipated 
= file size and download time 
_| THE OPTIMIZED option should be checked for maximum compression. that your optimised image 
will require. You can change 
| THE PROGRESSIVE option, when checked, will display your images the default modem speed 
via the menu button that 


as they load, making it look like your images are coming into focus. appears at the top-right 


corner of the preview pane. 


_| APPLYING BLUR to images can reduce the file size further, but don't 
use this over more detailed images for risk of losing quality. 


— THE ICC profile should be checked to preserve this aspect of the file’s 
information for the purposes of colour correction. 


THE MATTE option specifies a fill colour for areas of your image that 
may originally be transparent. 


Apoge PHort > CREATING Wes IMAGERY — Focus GUIDE 


33 


34 


Understanding .GIF settings 


Number of colours 

Just because your image 
only contains a single 
background and foreground 
hue, don't assume you can 
drop your colours right 
down to two colours. If you 
do this, your image will look 
pixelated as you'll be 
stripping the interim colours 
required to produce 
anti-aliasing. A colour table 
of four or eight colours will 
make a negligible increase 
to file size, but a dramatic 
improvement in quality. 


Dither 

‘Dithering’ refers to the 
process whereby colours not 
directly supported by the 
colour table are recreated. 
This is done by alternating 
pixels of the nearest colour 
on either side of that 
required in an attempt to 
trick the eye. 
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Optimising .GIFs is slightly more complex — 
we'll tackle the most important settings 


S elect the .GIF format and the 
Save For Web feature presents 
you with a wide range of options, 
although you’ll only need to know a 
few to begin with. Reducing the 
amount of colours is a good starting 
point, as the fewer colours indexed, 
the smaller your file size. 

If your .GIF contains transparent 
areas you'll also need to check the 
Transparency option for this to be 
included, as well as determining any 
Matting or ‘anti-aliasing’. 

Checking the Interlaced option 
will display the image as it loads, 


.GIFs provide a wider range of options when 
compared with JPGs, but you may find that 
only a few options are regularly used 

while the Web Snap option will shift 
your image’s colours to the more 
web-friendly palette. 


GENERATING A COLOR TABLE 


| THE PERCEPTUAL setting creates a custom colour table that gives 
priority to colours that are friendly to the human eye. 


(| THE SELECTIVE setting is the default and provides similar results to 
Perceptual, but will favour broad areas of colour, while preserving web 
colours to produce images generally more consistent with the original. 


() THE ADAPTIVE setting creates a table by sampling colours from the 
spectrum that are used most frequently within the image. So an image 
containing only green and blue produces a colour table made primarily 


of these colours. 


(THE WEB option will adapt existing colours to match those contained 
within the standard 216-colour range of web-safe colours. This ensures 
your colours are reproduced accurately in web browsers, but can create 
large file sizes and change colours significantly compared to the original. 


Transparency and matting 


Use matting to create smooth transitions 
between a graphic and its background 
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~~) Open koago_logo.psd from your CD - 
|__| this is ideal for conversion into a .GIF. 
With the Eyedropper tool take a sample of the 
background colour, then click on the new 
foreground colour in the main toolbar to open 
the Color Picker. Tick the Only Web Colors box, 
then make a note of the hexadecimal code for 
the colour (#CCFFFF) before hiding the 
background layer (click the layer’s ‘eye’ icon in 
the Layer palette) and accessing Save for Web. 


z “, | Select the .GIF format and make sure 
"| the Transparency option is checked to 
retain your see-though areas. Ignoring the 
other settings for the time being, turn toward 
the Matte option and choose the Other option 
to invoke the Color Picker. Enter the colour 
details of the original background (#CCFFFF) 
and click OK to apply the fringing to the 
foreground logo. 


_ | If you now zoom into the image (using 
| the magnifier, top-left of the window) 
and examine the edges of the logo you'll see 
how the matting creates a coloured edge, 
improving the blend between the logo and its 
anticipated background. If you continue to 
reduce the colours down to 8 the file size of 
the logo is dramatically reduced. Hit the Save 
button to export your work. 


| We can now take the image and embed 
_| itinto a web page. You'll notice how 
smooth the edges appear when compared to 
the same image without matting applied. 

The top version is without the anti-aliased 
edging, while that on the bottom contains the 
same image we've just converted — both set 
against a flat HTML colour background. 
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koago_logo.psd 

Use the koago_logo.psd file 
to complete the following 
steps. The file contains a 
logo set against a colour 
background, but to include 
transparency we'll need to 
anti-alias the edges to keep 
things nice and smooth. 


Hex codes 

Although you may be more 
used to working with RGB or 
CMYK values when 
specifying colours its worth 
getting into the habit of 
using the hexadecimal code, 
which is used to determine 
colour within HTML. 
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Chapter 3 


Editing images in Save for Web 


Thanks to a limited tool set it’s possible to 
make basic edits from inside Save for Wel 


Save For Web 


| he Save for Web feature is 
primarily intended for 
optimising your completed work 


Keyboard shortcuts prior to exporting. However, on 
Just as many of the tools occasions you may find you need to 
available in Save for Web a 
bear a close relationship carry out basic amendments to your 
with their counterparts image, or simply to navigate around 
within the main interface, : 
s0 too do the keyboard a large image for a better look. 
ee ah rai the Rather than cancel the action and 
‘ontrol]+[+] or [-] wi A . 
zoom in and out of your return to Photoshop there’s a basic One way to modify your work from within Save 


ingen li Ifyou're selection of tools along the left-hand for Web is by double-clicking on a segment with 
icon se i Ae Pid side of the Save to Web dial ogue the Slice Select tool. This opens the slice options 
box, which are ideal for basic tasks. | what these tools can achieve, which 

The descriptions below should will save you time and make your 


give you some understanding of workflow more efficient. 
THE SAVE FOR WEB MINI-TOOLBAR IN DETAIL 


ae The Slice Select tool is The Hand tool works as you | 
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available for modifying any 
sliced components of your 
layout. Double-click on a slice 
to access its options. 


Ga The Zoom tool also works 


in the same way as the main 
Photoshop counterpart, 
enabling you to increase or 
reduce the magnification of 
your image. 


Any colours selected using 
the Eyedropper tool become 
available here. Clicking 


might expect, by enabling 
you to move around larger 
images. Holding the space 
bar while clicking and 
dragging has the same effect. 


The Eyedropper tool will ial 


allow you to sample colours 
directly within the Save for 
Web interface, making it 
easy to gauge colours for 
matting, for example. 


If your layout makes use of ce 


slices you can toggle their 
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directly on this palette visibility on and off using 
opens up the Color Picker this final tool, giving youa 
for further options. better view of your work. 


timising Your Im 


Additional options 


Save for Web also gives you options for 
controlling the Color Table and image size 


Ne in the bottom-right 
corner of the Save for Web 
window are tabbed options for 
tweaking an image’s Color Table 
(only available for .GIF and .PNG 
formats), as well as changing the 
exported image size. 

The latter option is simple, giving 
you the chance to edit your image 
dimensions — by pixel dimensions 
or by a relative value — without 
returning to the main interface. 

Choosing the Jagged (Nearest 
Neighbour) interpolation method 
creates a faster, but less precise, 


Choosing the Image Size tab provides options 
for resizing your image directly from within the 
Save for Web dialogue interface 

conversion, while the Smooth 
(Bicubic) option is more precise and 
results in smoother tonal graduations. 


Interpolation 

When an image is 
resampled, an ‘interpolation 
method’ is used to assign 
colour values to any new 
pixels it creates, based on 
the colour values of existing 
pixels in the image. 

The more sophisticated the 
method, the more quality 
and detail from the original 
image are preserved. 


TWEAKING THE COLOR TABLE 


bas The Color Table is accessed 


Colours contained within i 


via the named tab toward 
the bottom-right of the Save 
for Web interface. A related 
menu is available by clicking 
on the arrowhead towards 
the right-hand side. 


With an individual colour 
selected you can map the 
selected colour to 
transparency using the first 
shortcut icon in this set. 


Ee The next icon enables you 


to shift colour to or away 
from the web-safe spectrum. 


This is useful if too dramatic 


a colour shift has occurred. 


the current table are visible 
in the main area, with colours 
that correspond to those 
within the web-safe range 
being identified by a dot. 


The final icons should be cael 


familiar as generic symbols 
that Photoshop uses for 
creating and deleting items - 
in this case they add or 
remove colours. 


Ifa specific colour is oa 


essential to the content you 
can choose to lock individual 
colours using the padlock 
icon, so as not to remove them 
when reducing your colours. 
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Download speeds 
There’s no denying that 
broadband connectivity is 
on the rise but you cannot 
take it for granted that 
everyone who accesses your 
site will have such a luxury. 
Setting your download 


For ultimate control over your exported image 
settings, don't forget the contextual menus 


Nese feature that’s common 
to many of Photoshop’s tools, 
palettes and features is the 
contextual menu. These menus 
present additional options specific 
to each tool tool, which can be 
accessed via the small arrowhead 
icons contained within circles. 

The Save for Web interface houses 


preview time to the 56k 
modem and designing for 
this audience will provide a 
more realistic average of 
your files’ download times. 


no less than three of these menus — 
the first is accessed at the top of the 
preview panes and to the right of the 
view tabs. From here you can specify 
colour compensation, as well as 
preview anticipated download times 


KNOW YOUR COLOURS 


for your converted image, based on 
different internet connection speeds. 
The second is located at the top- 
right corner of the Settings area and 
enables you to save combinations of 
settings, gain greater control over 
slices and access the all-important 
HTML output settings — we’ll take a 
closer look at these in chapter 9. 
The final menu is only available 
with the Color Table tab active and 
offers greater control over general 
colour options, such as converting 
all your non-web safe colours to 
the safe palette. 


Keep an eye on your hues in an instant 


The final component of the Save for Web interface for us to 
consider is the information bar along the bottom. Two of the 
options here enable us to magnify the view and to preview 
our exported file in a web browser. However, the feature that 
you'll find most useful is the colour information pane, which 
gives details about the area currently below your cursor. 
This information is presented as an RGB value, as well as the 
equivalent HTML ‘hex’ code. This gives you a quick indication 
as to whether your image's revised Color Table will result in 
accurately represented colours, or whether your exported 
file will create obvious colour shifts once it’s put online. 
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The colour information at the foot 
of the interface indicates the values 
beneath the current cursor position 


Saving an optimised page 


The Save for Web tool makes optimising and 
saving a working web page much simpler 


Open the paragon_sliced.psd image 
a from you CD, and make sure you can see 
the created slices via View > Show > Slices. 
Access Save for Web via the File menu and 
select the 2-Up tab to compare your conversion paragon_sliced.psd 
with the original. Use the Optimized option if uses cbeve Hie 0 


our screen size can’t handle both views. Use re 
y' u walkthrough, It's the same 


the Slice Select tool, hold down [Shift] and image that we used earlier, 
select the main photographic content. but we've put the slices in 
place for you already. 


Configure these slices to be converted 

into the JPG format with a medium 
compression setting. Then, select the 
remaining slices that constitute the central 
text and navigation elements set against 
white by clicking and dragging over the 
region with the slice select tool. Configure 
these using the .GIF format and reduce the 
number of colours used to 8 to take into 
account the text anti-aliasing. 


J With the basic configuration complete, 
hit Save to prompt the ‘Save Optimized 


As' window and choose a location where your ; paving 
a individual images 

converted files will be saved - place them Wave denianeirrted this 
within an empty directory to make it easier to method using asliced page 
access your assets. Change the file name if design, but you can use 
necessary and choose the‘HTML and Images’ exactly fesanrs process for 
. A 5 optimising individual 
option from the ‘Save As Type’ field. Make sure aan Obricteh aul 
All Slices is selected and hit Save again. won'tneed to access: 
individual slices, but the 

image optimisation and 

Photoshop will now begin slicing and saving process is the same. 

| aes . However, you'll only need to 
___ optimising the image to match your export the graphic without 
settings. Once complete you'll be able to access the HTML option. 


the folder to discover the .HTML file, along 
with a sub-directory containing the individual 
images. Double-click the .HTML file to preview 
the optimised page in your browser. If you like 
you can now open the page within your web 
building software to make any further changes. 
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GETTING 
STARTED WIT 
IMAGEREADY 


Creating web content with Photoshop alone 
is possible, but the program also comes with 

an integrated tool that’s dedicated to the job. 
In this chapter we'll introduce ImageReady... 


A: we’ve already discovered, 
Photoshop contains a number 
of essential features for creating 
online content, but if we were to rely 
on these features we'd soon find its 
limitations — after all, the program 
was never really intended for the 
task. Fortunately, another major 
inclusion that Photoshop has 
acquired since the 5.5 web upgrade 
is the integration of the dedicated 
ImageReady program. 

Previously, ImageReady had only 
been available as a stand-alone 
application, although it owed many 
of its principals to Adobe’s flagship 
software in terms of interface and 
functionality. So when the 5.5 


upgrade came around it seemed only 
natural that ImageReady should be 
combined with Photoshop to create 
a powerful combination of tools for 
the web designer. 


Two into one 

Even though ImageReady has been 
included as part of the Photoshop 
package since 1999, it’s essentially 
still a separate application, which 
many Photoshop users don’t have 
any reason to explore. 

But as we’ll show you over the 
following chapters, the software 
provides a range of dedicated tools 
that online designers really cannot 
afford to ignore. If you are 
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Page 42 Find out what ImageReady can 
do and how it complements Photoshop 


Page 47 Create interactive images 
using the humble rollover effect 


reasonably familiar with Photoshop 
you should be able to make the step 
over to ImageReady without any 
problems, because both titles share a 
similar interface and approach to 
digital imaging editing. 

Of course, there are important 
differences between the two titles, 
but with the programs intelligently 
recognising each other, it becomes 
easy to take advantage of both 
feature sets as you bounce your work 
seamlessly between applications. 


Moving on... 

It’s no suprise then, that ImageReady 
is the preferred method of creating 
web content for most Photoshop 


Page 43 ImageReady looks familiar, but 
dig deeper and you'll see the differences 


Page 48 ImageReady’s animation tools 
bring a new dimension to your content 


users, with more advanced support 
for web-specific features such as 
rollovers, animation and the creation 
of image maps. 

Now we've got to grips with 
Photoshop’s basic concepts, the 
majority of the rest of this Guide 
will tend to focus on using 
ImageReady. However, we’ll still be 
making reference back to Photoshop 
for common features, which we’ll 
start to explore over the next chapter. 

Once you understand the strengths 
that each application brings to the 
creation of content for the web, 
you'll soon realise just how powerful 
the combination of these two great 
titles can be. 
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Page 49 Find out about HTML image 
mapping and create links in any shape 


Page 45 The palettes look familiar, but 
the new features need some introduction 


a 
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Accessing ImageReady 


Photoshop’ shortcut to ImageReady will 
preserve your edits as you switch programs 
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Keyboard shortcut 

The keyboard combination 
of [Control]+[Shift]+[M] 
(using Windows) or 
[Command]+[Shift]+[M] 
(on a Mac) is well worth 
becoming familiar with if 
you anticipate working 
between Photoshop and 
ImageReady. This shortcut 
will toggle between the two 
applications, taking any 
current changes that you've 
made with you. 


Up to date 

When you're working with 
an image in both Photoshop 
and ImageReady you'll find 
the file temporarily 
unavailable when you 
move from one application 
to another. Don't worry — 
any changes are quickly 
transferred so you can take 
advantage of both tools 
without you needing to 
save your work. 
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D espite ImageReady being 
bundled with Photoshop, 
many users prefer to use the main 
program to develop designs. These 
are then exported to ImageReady 
to create web-specific content. 
When it’s time to export your work 

you can opt to launch ImageReady 
by traditional methods (via the 
Windows Start menu or from your 
Apple Mac Applications folder), 
but there is a more efficient way. 
If you’ve worked on a design in 
Photoshop simply hit the ‘Jump to 
ImageReady’ button in the toolbar, 


Transferring work to and from ImageReady is 
made possible using the Jump To ImageReady 
button found at the foot of the toolbar 

which launches the program, and 
also transfers any changes that 
you’ve applied to your active image. 


Why USE IMAGEREADY OVER PHOTOSHOP? 


C IMAGEREADY is like a more flexible version of Save for Web, but with 
many of Photoshop's core tools and features also at your disposal. 


C) ANIMATION EFFECTS are possible within ImageReady for the creation 
of basic animated content. You can use frames to create animated .GIFs. 


(IMAGE MAPS are impossible through Photoshop alone, while 
ImageReady can recognise, create and configure them without any 
problems. It will also create the HTML needed to produce the final page. 


C) IMAGEREADY is much more capable when working with slices or even 
creating rollover buttons from such elements, which can include multiple 
state buttons for more advanced results. 


() DEDICATED PALETTES are available to ImageReady, which give you 
access to more web-specific content. This includes optimisation settings 
for exported work and rollover configuration. 
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What's the difference? 


Look a little closer at ImageReady and you'll 
see it’s not quite the same as Photoshop 


O n first impressions, 
ImageReady bears an 
uncanny resemblance to Photoshop. 
Indeed, many similarities within the 
interface, menu items and keyboard 
shortcuts make the program seem 
familiar to anyone who has ever 
used the image editing giant. 

But look closer and differences do 
start to emerge. Many of these may 
be obvious to seasoned Photoshop 
users, but an explanation of what 
they bring to the software will be of 
benefit to the more casual user. In 
this chapter we’ll look in detail at 


THE IMAGEREADY INTERFACE 


The main canvas bears 
many similarities to when 
working in Photoshop's Save 


The ability to float groups of tools freely isa 
feature unique to ImageReady, which many 
would appreciate in Photoshop itself 

some of these new features — the 
diagram below should give you an 


Generation gap 
Incommon with most of the 
previous Photoshop Focus 
Guide issues, we're 
concentrating primarily on 
the Photoshop and 
ImageReady 7.0 generation. 
All the features we mention 
here can also be found in 
the updated CS version, 
along with a number of 
other upgrades which we'll 
mention throughout the 
following chapters. 


idea of how the interface is presented. 


for Web mode, most notably 
with the inclusion of the tabs 
at the head of the image. 


The toolbar remains 
familiar in concept, although 
there are a couple of 
additional features, as well 
as some missing from its 
Photoshop equivalent. 


A dedicated palette group 
is available to take care of 
the various web-related 
options and features that 
ImageReady supports. 


The Options bar is 
contained in exactly the 
same position and offers 
the same purpose as its 
Photoshop counterpart. 


The standard palettes 

grace the right-hand side of 
the interface although some, 
such as Optimize, are unique 
to ImageReady. 


There are also familiar 
palettes such as those for 
Layers and Color options 
although these too may have 
some slight variations. 
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A different toolbox 


The main toolbar is the best place to 
start when working with either program 
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CS tools 

The ImageReady CS 

toolset has a couple of new 
additions when compared 
to the 7.0 generation. 

Most prominent of these is 
the inclusion of shapes and 
button options, which 
enhance the software's 
vector capabilities. 


Pisces users will recognise 
most of the icons used in the 


ImageReady toolbar. However, if 
you compare the sets you’ll soon 
notice some key differences that 
reflect the programs’ different roles. 

ImageReady boasts a wide range 
of web-specific functions, such as 
the collection of Image Map tools 
that are used to define hotspots 


within a graphic image, for example. 


In addition to this, there are a 
number of web-specific functions 
that are located below the 
foreground and background colour 


WHAT, NO HEALING BRUSH? 


What's missing from ImageReady and why 


Some core tools are available to both applications, but 


becasue it’s so easy to switch between the two, the missing 


elements from ImageReady’s set aren't too badly missed. 


The most notable omissions are the various adjustment 


tools such as the Healing Brush and Patch tool, along with 


those grouped together with the Blur and Dodge options. 


Due to ImageReady’s lack of Shape or Pen tools, vector 


control is still best performed within Photoshop. However, 


this is hardly surprising when you consider that ImageReady’'s 


primary purpose is for the creation of web content. More 


complex image editing tasks are best left to Photoshop. 
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icons. These give you the option to 
toggle the visibility of mapped and 
sliced content, making it possible to 
lose all your visual guidelines if they 
become too distracting while you 
define your layouts. 

Moving further down the toolbar, 
the Preview Document button 
provides a view of the page that may 
rely on dynamic content. While the 
Browser Preview option simply 
creates a temporary version of your 
layout using the current settings 
complete with access to the 
generated HTML files. 


Photoshop's toolbar, compared to the 
smaller ImageReady bar. Omissions 
are mostly adjustment-based tools 


Photoshop's Web Content Specialist 


Same palettes, different features 


Many of Photoshop's palettes are also available 
in ImageReady, but often with a subtle twist 


i he palettes to the right of the 
ImageReady interface further 


illustrate the similarities between the 
two titles, but closer inspection will 
highlight a few differences. 

The ImageReady Info palette, for 
example, contains additional data on 
the opacity of a selected hue as well 
as its hexadecimal value for HTML 
coding. The Color palette also offers 
familiar controls, but again with the 
ability to enter values through the 
web-centric hexadecimal method. 

The Layers menu is essentially the 
same in both programs, but the 


UNIFYING LAYERS 


Hexadecimal info is available in the Info and 
Color palettes within ImageReady, for a more 
HTML-friendly approach to colour recognition 
ImageReady version also includes a 
range of Unify options, which we’ve 
explained further below. 


O THe UNiFy options found in ImageReady’s Layer palette determine 
how changes made to a layer affect related states, should that layer be 
included within any rollover or animation sequences. 


C1 THE FIRST Unify Layer Position button should be used to apply changes 
to a layer’s position to all states in a rollover, or frames in an animation. 


CO ACTIVATING THE Unify Layer Visibility button has a similar range of 
control although, as the name implies, this is used to control the visibility 
of the various related states, 


0 THE FINAL option is known as the Unify Layer Style button, which 
applies changes you make to a layer’s style across all rollover and 


animation frames. 


CO) THE Laver > Marcu function should be used to apply layer 
attributes for an existing state or frame to those which it may be linked. 


Understanding 

‘hex’ colours 

The hexadecimal method 
used to determine HTML 
colouris essentially a 
variant on RGB, with the six 
digits being grouped in 
three pairs of two ranging 
from 00 to FF. Using the RGB 
model the colour FFO000 
would therefore provide 
the purest red available 

to the palette. 


Arranging palettes 
Unlike Photoshop, there is 
no Palette Well in which to 
keep your frequently used 
palettes. You can, however, 
group your preferred tabs 
together within acommon 
palette, then close down the 
least popular options. 
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Unique ImageReady palettes 


Droplet 

A droplet can carry outa 
series of tedious tasks in one 
simple click.This comes in 
handy if you know you need 
to carry out the same task 
again and again, such as 
converting a whole folder- 
full of images to JPGs at 
72dpi, for example. You can 
do this in record time by 
simply dragging the image 
files onto the Droplet icon. 


Besides the common tools, ImageReady has 
more than its fair share of unique options 


fuses no mistaking that 
ImageReady is a powerful 
program in its own right, and there 
are plenty of extensive features on 
offer that require their own palettes 
for managing content. We’ve already 
looked at a few palettes that are 
similar to the ones you'll find in 
Photoshop, but now we need to 
become familiar with a range of 
unique ImageReady variants. 

Unlike Photoshop, ImageReady 
presents all its available palettes by 
default, so there’s no need to worry 
about hidden options. We mentioned 


UsiNG DROPLETS 


Streamline your workflow by automating common settings 


You may be familiar with the concept of Droplets and their 


close relationship with Actions from within Photoshop itself, 


so it won't come as too much of a surprise to discover that 


ImageReady supports the creation of this feature too. 


The Optimize palette, which you'll use regularly, contains an 


icon in the top-right corner that allows you to create 


Droplets at the click of a button, recording your current 


palette settings. You can then save the Droplet directly to 


your desktop to automate the process of image format 


optimisation by simply dragging the files directly onto the 


droplet and leaving ImageReady to carry out the task. 
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earlier that working in ImageReady 
can often be compared to an 
advanced form of working with the 
Photoshop Save for Web feature. 

This becomes quite apparent when 
you look at the options available to 
the Optimize palette, which bears 
many similarities to Save for Web, 
with options changing depending on 
the selected file format. Similarly, 
the Color Table provides a range of 
features that should be familiar right 
down to the shortcut icons and 
contextual menu that we explored 
back on page 37. 


Configure your settings, then createa 
Droplet with the button in the top-left 
corner of the Optimization palette 
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The Rollover palette 


Understanding the basics will prevent 
you getting into a state over your rollovers 


Age key ImageReady 
feature is the Rollover palette, 
which determines the appearance of 
your buttons in their various states. 
Button states are ultimately 
determined by user interaction, 
with JavaScript controlling their 
appearence, depending on the way 
the mouse cursor is interacting with 
the button. However, you’ll first 
need to set up your available button 
states via this new palette. 

The shortcut icons at the foot of 
the palette allow the creation and 
deletion of individual states or the 


The rollover palette displays the various states 
available to each button. These are defined 

by the different layer views 

automatic generation of layer-based 
rollovers. We’ll look at the various 
options in more detail on page 52. 


UNDERSTANDING THE ROLLOVER PALETTE 


The original image reflects 
any characteristics 
dependent on the currently 
active state, which in this 
case is for the Over position. 


The regular Layers palette 
comes into play for 
controlling rollover content -— 
in this case we've decided to 
display the solid block when 
the mouse is passed over the 
anticipated button. 


The creation of rollover 
states can be automated 
and based around existing 
layers using the first of the 
shortcut icons at the foot 
of the palette. 


States 

A’state'is defined as the 
status of a button, which is 
determined by mouse 
interaction. With no 
interaction a button is 
considered to be in‘Normal’ 
state, This changes to the 
‘Over’ state when the mouse 
Passes over the button. 


The individual layers 
contained within the 
Rollovers palette determine 
the different states in which 
a button can be displayed. 


The thumbnail to the ‘Over’ 
state displays the solid block, 
This appears when the mouse 
cursor passes over the button, 
while the Normal state 
displays the regular image. 


The remaining shortcut 
icons should be identifiable 
as generic symbols for the 
creation and deletion 
elements; in this case the 
layer states themselves. 
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The animation principle 


GIF, not JPG 

The only format that 
ImageReady is able to 
export to support animation 
is .GIF. However, with the 
latest CS version of the 
software it becomes 
possible to export the 
individual frames into the 
.SWF format, which can then 
be taken into Macromedia 
Flash for more advanced 
animation possibilities. 


With frame-based animation you can add the 
additional dimension of time to your artwork 


a he concept of animation 
within the Photoshop and 
ImageReady environment may be 
alien to many, but grasping the basic 
idea is pretty straightforward. In 
some respects the principle bears 
many similarities to the Rollover 
method that we’ve just looked at. 
You create snapshots, or frames, that 
define a moment in time in which 
you can make adjustments to the 
layer content or positioning to 
simulate movement. 

Whether this takes on a lateral 
motion like our diagram below 


illustrates, or is used to cycle a 
sequence of images is up to you. 

It can be tempting to get carried 
away with over-ambitious ideas, but 
you must remember that each frame 
adds considerable weight to the 
original image so keep animated 
content small and simple. 

There are plenty of examples of 
animated .GIFs to be seen online, 
and despite their cheesy reputation 
they can add some interesting detail. 
Just remember to approach your 
design with some consistency and 
a liberal helping of subtlety. 


AN ANIMATED EXAMPLE 


Understanding animation, frame by frame 


Animation is based around frames that denote a moment in 
time. The image here shows a simple animation of a ball 
moving laterally from left to right across a static background. 
With each frame, the ball travels a little further, pausing for a 
fraction of a second before the next frame displays, creating 
the illusion of movement. The amount of time between 
frames is so short that the eye is tricked into seeing 
movement.To create a smoother animation more frames 


need to be added, but doing so would require each frame 

The Animation palette clearly shows 
the frame-based movement of the 
ball across the background 


to be displayed for a shorter increment in time, otherwise 
the ball will appear to be moving at a slower pace. 
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Getting around Image Maps 


While animations and rollovers have close ties, 
image maps are more similar to slices 


H™ dictates that sliced 
images must be rectangular, 
and this rule determines the shape of 
the majority of graphic elements that 
form a link. The only exception to 
this rule, outside of the Flash .SWF 
format, is to use ‘image maps’. 

An image map defines a region 
that acts as a link but has the 


Circles from the centre 
By default, the Circle Image 
Map tool will draw a region 
contained within the 
dragged area - if you prefer 
to draw a circle from the 
centre simply hold down 
the [Alt] key as you create 


i 
i 
i 
i 
é 
i 
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d f . 1 the selection. 
advantage S ‘Supporting Comp ex Using Image Mapping we can define irregular- 
shapes. This is achieved through shaped links within an image, controlling their 
HTML code, which defines the attributes via the Image Map palette 
coordinates of an active link area. creation of image maps, and it even 
ImageReady provides a range of has a dedicated Image Map palette 
tools listed below that allow the to help set up your hotspots. 
IMAGE MAPPING TOOLS 
Hiding maps 
C1 THE IMAGE MAPPING TOOLS are grouped within the ImageReady Don't forget the additional 
toolbar to the left of the Slice tool. They create similar results but Image option within the 
ImageReady tool bar, which 


Mapping is primarily used for creating irregular-shaped links or hotspots. 


C) THE RECTANGLE IMAGE Map tool provides the most basic control, 
defining a rectangular shape that will be defined as a linking region. 


OTHE Circve ImaGE Map tool offers the same kind of feature, but this 
time for rounded shapes. This would be impossible to slice given the 
limitations of HTML. 


( THE PotyGon IMAGE Map tool enables you to create by far the 
most complex shapes. The mapped region is defined in the same way 
as you might create a selection with the Polygonal Lasso tool. 


0) THE IMAGE Map SELECTION tool should be used with existing 
mapped areas to further edit the dimensions or proportions of a shape. 


allows visual identifiers such 
as slices and mapped image 
areas to be temporarily 
hidden from view. 
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CREATING 
INTERACTIVE 


IMAGES 


The humble hypertext link is what makes the 
Internet more than just a collection of static 
pages, but with JavaScript we can make image 
links a more obvious interface design element 


\ N ] hen HTML was originally 
developed it was used by 

academics and government 
organisations to deliver plain text- 
based documents with minimal 
formatting. However, even these dry 
documents were in need of imagery 
to illustrate arguments and findings. 
So when the Mosaic browser was 
introduced in 1994 to support the 
image tag, the medium started to 
find a new audience, as more 
commercial and entertainment-based 
content started to become available. 

But despite HTML advantages in 
terms of being easy to author and 
understand, the language has very 
limited capability. It wasn’t until 


JavaScript was developed by 
Netscape to enhance the potential 
behind the mark-up language that 
we started to see the emergence of 
more dynamic content online. 


Rollover images 
One of the first, and most commonly 
used, pieces of JavaScript developed 
was used to control the action of a 
rollover image. The principal allows 
a regular image to be replaced by 
another of the same dimensions as 
the cursor is passed over, before 
returning to the original image when 
the cursor is moved away again. 

The principal has since become a 
standard method of indicating a link 


COMPUTER 
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3ds Max 4: 


Page 52 Discover the difference 
between an ‘Out’ and ‘Over’ state 


Page 53 Discover how to define 
Rollover regions and create button states 


Page 54 Walk through the process of 
creating a basic rollover from scratch 


New Rolover State 


Duplicate Rolover State 
Delete Rollover State 


v New Layers Visble in Al States 


Palette Optons. 


Page 57 Make the most of the Rollover 
palette by mastering its contextual menu 


and is now used as an indication of 

this function in all sorts of interface 

design, from software to DVDs. 
The method allows the user to 

easily identify where links appear 

without clicking randomly around 

a page, or waiting to see whether 


their cursor turns into the hand icon. 


The Adobe method 

Because JavaScript is often beyond 
the bounds of the average designer, 
we have come to see various 
applications support the creation of 
JavaScript elements without any 
coding experience being necessary 
and Photoshop — or rather 
ImageReady — is no exception. 


Page 58 Ensure your rollovers work 
by previewing them in your browser 


Page 59 Once you've completed your 
settings, save and optimise your work 


Photoshop’s web cousin takes on 
the responsibility of creating 
rollover content and allows you to 
concentrate on the design of your 
navigation without having to 
concern yourself with coding. 

Once you're happy with your 
design, the page or image can then 
be exported with the JavaScript in 
place. You can build around these 
elements using your regular HTML 
authoring application, or just cut and 
paste them into an existing page. 

In this chapter you'll discover 
everything you need to know to 
create JavaScript content and add a 
touch of class to your page layouts, 
bringing interface elements to life. 
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Recognising rollover states 


Can't tell your ‘Out'from your ‘Over’ state? 
Read on and it will all become clear... 


\ \ ] ith rollover images you need 
to be aware of the ‘state’ of 

your dynamic links, which reflects 
how the link has been used so far. 
The different states are usually 
triggered by interaction with the 
mouse cursor; so the most basic 
state, known as ‘Normal’, is visible 
by default when the cursor is 
nowhere near the image. 

The second most common state is 
displayed when your cursor passes 


art 


Browser variations 
Different web browsers — 
and even different versions 
of browsers — may process 
clicks and double-clicks 
differently. To ensure the 
pages you create function 
as anticipated, it is 
recommended that you test 
them using as many different 
browsers as possible. 


3ds Max 4: Part Five 
Over the past fow weeks, wove st 
character animation trom start to 


Although similar in function, using CSS allows 
similar results to the graphic rollover by 
changing the properties of text links 


over the image in question — this is 
logically named the ‘Over’ state. 
There are plenty more states 


available (see below), although you 
may find yourself using only Normal 
and Over with much regularity. 


Advanced states a “* se iain a 
A further Custom state can NORMAL AND OVER are the most frequently used rollover states. 
be recaled en tne User These are used to define the default image and the image that’s 
performs an action defined E 13 . 

in the corresponding triggered when your cursor passes over the link respectively. 


JavaScript code. However, 
such code must be manually 
created, so some knowledge 
of JavaScript must be 
assumed before a Custom 
state can be applied. 


THE DowN state is activated while the user actually clicks on the link 
image, revealing an additional state to the Normal and Over images. 


WHEN THE mouse button is then released a fourth state can be 
prompted. This is known as the Release state, which usually acts as the 
actual trigger to perform the link action. 


A SELECTED state can be used to act rather like a radio button, in that 
it will remain active until another button is selected. 


THE OuT AND UP states are lesser-used options used to prompt 
an event when the cursor moves away from a link image, or when the 
mouse is released over a link image. 
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Defining rollovers areas 


To get started with rollovers you need to know 


how to define the area that triggers the effect 


l 0 create a rollover effect you 
need to decide on the region of 


your image that will prompt the 
effect. If you’re creating individual 
buttons from scratch then you may 
choose to use the entire canvas, 
sized at the required dimensions. 
However, if you’re planning on 
adding a rollover feature into an 
existing design, you'll need to 
consider how to restrict the effect 
to a particular region. 

There are two methods of doing 
this; image maps, which we’ll look 
at in greater detail in Chapter 7, 


and slices. Both have their strengths 
and weaknesses dependent on the 
situation, but generally the most 
efficient method for creating link 
regions is slices. This is because a 
slice will define a self-contained 
image that’s much smaller in terms 
of file size, as well as having the 
advantage of being easily reusable 
in other areas of the site. 

With a region of your image 
defined, the act of creating an 
alternative state for the image is as 
simple as using the shortcut icons 
from the Rollover palette. 


WHEN TO USE IMAGE MAPS 


Why slicing is the preferred method of assigning a region 


Using an image map to create rollovers is not very common. 


This method requires an alternative of the entire image to 


be recreated, which will increase the file size considerably. 


You might choose to use an image map over smaller images 


to constrain the link action to a specific region, but with 


larger layouts this can quickly become inefficient if your 


rollover relies on multiple states, as individual files become 


Consistent effects 

If you're slicing an image 
that contains a navigation 
bar you may want to 
consider more subtle 
methods of making the 
rollover apparent. A simple 
change of text colour is 
often more than enough, 
whereas creating more 
defined button shapes is 
often best achieved 

by building such elements 
from scratch, 


necessary for each state. For this reason, it's quite rare to find 
a rollover that's triggered through a mapped region.|n most 
instances individual images are sliced, which results in much 
faster download and response times. 


With a region defined, a rollover state 
is created using the shortcut icons at 
the foot of the Rollovers palette 
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Creating rollover content 


Walk through the process of creating a rollover 
graphic — you'll see how easy the task can be! 


Defining through slices 
The process we've used here 
creates individual graphics 
that might be used for 
navigation buttons. 
However, exactly the same 
process can be applied to 
larger layouts simply by 
defining the region that 
acts as the rollover using 
the Slice tool first. 


Amending titles 
Changing text colour is 
another feature common to 
rollover buttons. You'll need 
to duplicate the text layer 
and make the necessary 
changes to that before 
creating and hiding the 
relevant layers, depending 
on which state they should 
be displayed. 
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Create a simple button in Photoshop by 

creating a new file using the dimensions 
of 150x30 pixels with a resolution matching 
the monitor display at 72dpi. Leave the 
background white and add a text layer with 
some copy in a neutral colour to identify the 
button. Align this text to the left of the button 
area and transfer to ImageReady using the 
Jump To button at the foot of the toolbar. 


If it isn’t already available, open up the 
_ Rollovers palette via the Windows menu 
and expand this so you can see the content. 
Click on the ‘Create Rollover State’ shortcut icon 
at the foot of the palette and you'll notice an 
Over state is created to duplicate your original 
image, and is nested inside the original. 


| To create the variation for the rollover 
button’s Over state, create a new layer 

and make a selection to the right of the 
canvas. Fill this with the same colour as the 
main text. Notice how this applies itself to all 
the current states of the image by default. 
To get around this select the Normal state 
and hide the layer before returning to the 
Over state and making it visible. 


You'll now see how the new layer only 

becomes visible when the Over state is 
selected, and so toggling between the Normal 
and Over layers within the Rollovers palette 
automatically hides and reveals the additional 
element.When the final image is exported this 
effect will be replicated as the mouse cursor 
passes over the graphic. 


When not to slice 


For more consistency between frequently-used 
graphics, you should try another approach 


| he previous walkthrough 
concentrated on creating an 


individual navigation button, but why 
should we do this when we’ve been 
considering slicing larger designs? 

There’s nothing wrong with slicing 
navigable elements from a larger 
layout design, although you may 
need to pay close attention to the 
dimensions of the individual 
graphics to retain consistency across 
multiple navigation buttons. Pro web 
designers tend to create separate 
files for this kind of navigation 
button, often using the same 


principle as we did on the previous 
page, but simply changing the text 
to reflect the purpose of the button. 

This way they can be assured that 
colour, dimensions and compression 
settings are consistent and avoid any 
irregularities that may occur as a 
result of images being created 
individually. It’s also easier to keep 
the site up to date if you’re using this 
method, because new navigation 
graphics can simply be created from 
a single file without you needing to 
slice a new layout each time your 
content changes. 


THE BROWSER CACHE 


Recycle images throughout your site for faster loading 


Another reason to create imagery that can be featured 
throughout your site is to ensure they fit into a standard 
layout. If we look at the illustration shown here it’s clear that 
the navigation buttons contain excess space below the 
actual text, although this is necessary to recreate the page's 
table successfully. With more generic buttons, not only will 
the graphic be more efficient but it can also be referenced 
across various pages, taking advantage of the browser 
cache. This is a local folder that holds graphics and text from 
sites you have recently visited, which the browser calls upon 
to improve render speeds when you return a site. 


Organised assets 
When youre creating asset 
files that will contain your 
common graphics, don’t 
forget to provide logical 
generic names so you can 
find and identify the files in 
future, Grouping layered 
buttons within Layer Sets is 
another way of making 
things easy to return to, 
should you need to recreate 
the buttons for a site six 
months down the line. 


Navigable elements sliced froma 
larger design will be inefficient for 
any page other than the original 
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Reducing space around rollovers 


Padding images 

Not only will tighter 
cropping remove excess 
pixels, but it also reduces the 
file size of an image to 
improve its optimisation. 
Ifyou need to create space 
around your image in the 
final page you can always 
turn to HTML and specify 
margin or height widths 
around the graphic. Your 
web authoring software will 
enable you to do this. 


Make your rollover effects work more 
reliably by fine-tuning your linking regions 


\ N ] hen creating rollover 

graphics you'll need to pay 
close attention to the area that will 
trigger your link effect. It’s no good, 
as we’ve illustrated here, having an 
effect that’s triggered by surrounding 
pixels. In this case we need to crop 
closer around the intended link 
region to make the button behaviour 
a little more predictable. 

Whether this is done by cropping 
the entire image or adjusting the 
slices within a layout depends on the 
design you’re working on. If the 
linking graphic is part of a bigger 


CROPPING BUTTONS 


= file Edit View Favortes Tools Help 


Address (o) C:\Documents and Settings\Chris SchmidtiLocd 


If your rollover image is not carefully cropped 
you run the risk of pixels that should be part 
of the background triggering the rollover 
design you may, however, consider 
creating a layer-based rollover, 

as we’ve illustrated below. 


Ifa button has been 
created as a single image the 
best option is to drag guides 
around the larger layer and 
crop the entire image. 


Your layout is automatically 
sliced to correspond to the 
active layer with auto layers 
created around the primary 
rollover layer. 


All that is then necessary 
is to create new layers and 
determine their visibility for 
the various states. 
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If, however, your graphics 
need to be considered as part 
of a bigger design, you can 
automate the rollover by 
selecting the background 

of your button. 


The default expected 
rollover states are then 
generated around the 
selection with the Normal 
and Over states easily 
accessible. 


You can then click on the 
‘Create Layer Based Rollover’ 
button at the foot of the 
Rollover palette to create 

_ apixel-perfect selection. 


Rollover palette options 


For greater control, the Rollover palette 
menu provides more general options 


C ontextual menus often provide 
powerful controls that are 
relevant to a particular palette, and 
the Rollover palette is no exception. 
To access the menu click on the 
small triangle contained in the 
top-right corner of a palette. 
Options specific to an individual 
rollover state can be accessed by 
right-clicking on the state itself, but 
the palette options give you a little 
more control over general set-up 
and management of your rollovers. 
We've outlined the fundamental 
operations below, but bear in mind 


circle in the top-right corner of the palette 


state is selected. 


ROLLOVER PALETTE OPTIONS AVAILABLE 


CREATING NEW and duplicate rollover states is available via the menu, 
to which ImageReady will associate the next most logical state by default. 


IT Is ALSO possible to delete an entire rollover action or, if an individual 
state is selected, that too can be removed from the function. 


COPYING and pasting rollover states can be a convenient way of 
duplicating particular preconfigured renders that you may want to 
apply to other states. 


THE ROLLOVER State Options enables you to instantly change the 
action that triggers the rollover effect. The lower palette options, on the 
other hand, simply provide preferences for the display of your rollovers. 


UNCHECKING the New Layers Visible option may make defining new 
state content a little more intuitive, as new content is then only applied 
to the current layer. 


The Rollover palettes options can be accessed 
by clicking on the triangle contained within a 


that certain functions only become 
available once a particular rollover 


Wt 


Seeing states 

By default the Rollovers 
palette will display three 
states fora two-state 
button. Confusingly, this is 
because the state labelled 
Normal actually includes all 
slices and image maps that 
the overall image may rely 
on. Right-click the layerand 
uncheck the option and 
you'll only have the actual 
rollover layers available 

to you. 


Get into a state 

A quicker way of revising an 
existing state is to right-click 
on the layer and amend the 
Set State option. 
Alternatively, simply 
double-click on the state 
layer to be presented with 
the rollover state options. 
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Previewing your rollover 


button.psd 

Use the button.psd to 
preview the final rollover 
effect through the browser. 
The image contains a simple 
button, whose text and 
background colours invert 
when the mouse is passed 
over the button area. 


Other browsers 

Any self-respecting web 
designer should have all 
the current versions of the 
major browsers installed on 
their computer, along with 
any popular previous 
versions such as the fourth 
generation Microsoft and 
Netscape browsers. To test 
your effect in an alternative 
browser, choose the File > 
Preview In > Other and 
locate the browser program 
directly from your system. 
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Before you save your final rollover make 
sure it works within a web browser 


Open the button.psd file within 

ImageReady and take a moment to 
familiarise yourself with the layers used, 
paying attention to those displayed or hidden 
during the Normal and Over states. Create the 
slices by selecting one of the button layers 
and making use of the ‘Create Layer Base 
Rollover’ button at the foot of the Rollovers 
palette before configuring their behaviours. 


The most immediate method of 

previewing the completed rollover is to 
turn to the toolbar and choose the ‘Preview in 
Browser’ icon, which should display the icon 
using your default browser. This can also be 
accessed via the File > Preview option. 
Click on this and ImageReady will mock up the 
files and code necessary to see the effect in 
action within your chosen browser. 


The actual image and rollover are made 

available at the head of the page, along 
with various other pieces of information such 
as the file format of the graphics, their 
dimensions, collective file size and settings, 
along with the source code that ImageReady 
has created to make the effect available. 


Pass your cursor over the image button 

at the head of the page and you should 
see the rollover effect in action. Notice also 
how the image reverts back once the cursor is 
passed away again, and that the sliced region 
defines a close crop around the button. 
This prevents the background pixels from 
triggering the rollover effect. 


Saving rollover images 


After all the hard work you'll want to save 
your work and export it as a working page 


[ you remember, we suggested 
that working within ImageReady 
can be likened to working directly 
within Photoshop’s Save for Web 
feature, but with the benefit of the 
additional features that the software 
provides. With this in mind, you can 
use the Slice Select tool to activate 
slices and make use of the Optimize 
palette to squash the file size of 
your exported imagery. 

Keep an eye on the status bar of 
your canvas for some indication 
of the file size and predicted 
download speed of your imagery. 


IMAGES ONLY 


Once you’re happy you have the best 
settings, all that’s necessary is to 
choose the File > Save Optimized As 
option and determine a final 
location for the generated assets. 
The Save To dialogue enables you 
to locate the required directory, as 
well as offering a variety of saved 
formats. You can choose to save the 
entire page including HTML, or to 
save either aspect alone. You can 
also choose from familiar options 
for general settings, and slicing 
options which you should determine 
before finally saving your work. 


Why save your work without the containing HTML? 


Giving you the options to save the optimised files either as 


HTML or images may seem rather limited, but it must be 


remembered that GoLive - the web authoring relative of 


Photoshop — doesn't enjoy the same dominant status as the 


image editing application. Many web designers prefer the 


Macromedia alternative, Dreamweaver, or even opt to hand- 


code their pages and create their own layouts.|In these 


instances the Images Only option might be a better bet, 


enabling you to take advantage of ImageReady and 
Photoshop's workflow advantages in terms of slicing and 
optimising graphics, which your larger layouts rely on. 


Selecting 

multiple slices 

Rather than selecting and 
configuring each slice 
individually, you can select 
multiple slices by clicking 
and dragging across them, 
or by holding down the 
[Shift] while clicking on 
multiple slices in turn. 


Once you're happy with your images 
you have options to export your 
assets as either HTML, Images or both 
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Chapter 


SLICE YOUR 
IMAGES USING 
IMAGEREADY 


Photoshop's main interface can cope with 
slicing, but you'll have much better control 
over the feature by using ImageReady 
and its dedicated Slice palette... 


In this chapter... 


o Recognise the 
dedicated Slice 
Palette in ImageReady 


DO create and edit your 
sliced images 


O Get to know 
the Slices menu 


Oladd HTML text and 
links to your images 


oOo Optimise your slices - 
keep file sizes down 


oO Saving your results 
ready for the web 


O: the face of things, there’s 
little difference between the 
way the Slice tools operate within 
Photoshop and ImageReady. Both 
tools are presented as options within 
the toolbar, with the regular Slice 
tool for the creation of slices and 
the Slice Selection tool for further 
editing of existing slices. 

Despite these apparent similarities, 
there are a number of advantages to 
using the ImageReady environment. 
ImageReady is effectively a more 
advanced version of Photoshop’s 
Save for Web feature, therefore it 
makes it easier to edit the content of 
a slice and modify the optimisation 
processes of individual slices. 


Using dedicated tools such as the 
Slice palette for example, which is 
always available, ImageReady makes 
it easy to fine-tune your images at 
any stage in the editing process. 
There’s no need to visit the Save for 
Web feature or to run through a 
series of long-winded production 
stages for such fundamental access. 


Target audience 

You may wonder why Photoshop 
offers relatively few slicing options 
compared to ImageReady, but this is 
obvious when you consider the users 
who make regular use of the method. 
Slicing images and page layouts is a 
technique that’s peculiar to web 
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Page 62 The Slice palette provides 
access to the defined slice’s content 
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Page 65 ImageReady handles slice 
options more naturally than Photoshop 
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ve their very own 


menu within the ImageReady interface content 


design. That’s because large images 

will mean larger file sizes, which in 
turn can increase the amount of time 
it takes to deliver a page. 

Print designers and most other 
Photoshop users will rarely, if ever, 
have cause to use ImageReady. 

The only limitations they will face 
will be on the physical size of the 
paper they’re using. So, to keep the 
main Photoshop interface nice and 
tidy for the majority of users, these 
web-specific features are neatly 
tucked away within ImageReady. 


ImageReady advantages 
With this in mind it makes perfect 
sense that Adobe opted to leave the 


Page 67 Find out how to configure text 


Page 68 With slices set up, optimise 


with this short walkthrough the graphics that your layout relies on 


brunt of the Slicing capabilities 
within Photoshop’s web design 
relative. Not only does the Slice 
palette allow constant access to all 
those essential tools for configuring 
your web images, but the dedicated 
Slices menu found within 
ImageReady adds the kind of 
features that go way beyond 
anything that can be found within 
the parent title. 

Over the next chapter you should 
get a much clearer idea of what 
ImageReady’s essential Slice tools 
can do, and how it can save you 
huge amounts of time when it comes 
round to converting your designs 
into functional pages. 
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Napter 6 


The Slice palette 


Tear-off tools 

Auseful feature that 
ImageReady boasts over 
Photoshop is the ability to 
free-float grouped tools. 
Do this by clicking on the 
wide button contained at 
the foot of each group of 
tools and you'll find 
mini-palettes become 
available for quick access 
to various tools, such as 
the Slice options, 


Desktop control over your image's slices 
is available through this dedicated tool... 


\ \ ] hen you’re working with 
slices you can choose to 
work within the main Photoshop 
application or use ImageReady. The 
main advantage of ImageReady is 
that it has a dedicated Slice palette 
for controlling the output of your 
slices. This is an essential option for 
web designers, and is grouped with 
related options such as the 
Animation and Image Map palettes. 
We've outlined the features of this 
powerful palette below. Notice that 
we’ve expanded the interface to 
reveal the additional options offered 


THE SLICE PALETTE EXPLAINED 


The default Slice palette options provide basic 
controls, but selecting Show Options from the 
palette’s menu will expand your potential 

via the palette’s contextual menu bar. 
In Normal mode only the top half of 
these options would be visible. 


The Slice palette is 
grouped together with the 
Animation and Image Map 
equivalents. Access these 
through the Window menu 
if not already available. 


The opening options allow e 


you to determine whether 
the slice content should be 
presented as an image or not, 
and what the background 
colour should be. 


| 


Apreview is displayed 


within the palette to provide 


' 
i 


The fundamental ae 


some indication of the sliced 
area, along with a summary 

of the format and its position 
within the larger table. 


Advanced options include 
the ability to adjust the 
dimensions of the slice, as 
well as fine-tuning its 
positioning via the Xand Y 
coordinate values. 
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attributes for an individual 
slice include the name of the 
|__| jmage, as well as the address 
and destination window for 


any links. 


ING Wes IMAGER’ 


Alt(ernate) text isan ies) 


important field for creating 
accessible content, while the 
Message field specifies 
content made available to 
the browser's status bar. 


it Images Into Manageable Chunks 


Creating slices in ImageReady 


Slicing your images using ImageReady 
is far easier that using Photoshop alone 


TY If you followed our walkthrough on 

1 creating slices with Photoshop (Chapter 

2), you'll already have a good idea of how the 

slice principal works. Open the paragon.psd 

image and select the Slice tool from the ; paragon.psd 
toolbar to get started. Make sure the image's Jol foe ie focne te 
guides are visible by selecting the View > ‘on your CD-ROM, 
Show > Guides option and create an initial 

slice from the top and bottom of the image. 


fz] Continue the process with the Slice tool 
~_| to create individual graphics around 
the site title and the individual navigation 
graphics, as shown here. Keep reasonably 
close to the actual text content without 
creating overly large graphics. Once the initial 
slices are in place you can use the Slice Select 
tool, as you did with Photoshop, to select 
individual graphics for further configuration. 


qs] Unlike Photoshop, ImageReady 
provides additional control for setting 


up your slices. Bring up the Slice palette via 


Targeting links 


If you associate a link with 


the Window menu (if it's not already available) one of yourslices, you 

and you'll find a number of options to cater are given a number of 

for the task. Select the slice containing the options to determine the 

About link and enter a relative address for the Rea pigs forthe He 
: sy default the new page wii 

page into the URL field. You've pretty much acd wickiaihesarsh 

finished the task now, although you can still browser window as the 

define a target where your link will load. original link. However, if you 

select the_blank optiona 

_ | For additional Slice palette options you new page will be opened, 

le the Sh Opti listi while the_self_parent and 

can toggle he Show Options listing Wercntonsaremare 

found under the Slice palette’s contextual relevant when working 

menu bar. This expands the features available with HTML frames. 


to include Alt text, which will be understood 
by screen readers. The Message field enables 
you to enter text that will display within the 
browser's status bar, while the Dimensions 
field provides more precise methods of 
amending the size and position of a slice. 
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Chapter 6 


Editing slices 


Constrained 
Proportions 

This option, found grouped 
with the Dimensions within 
the Slice palette, will lock the 
relative dimensions of an 
existing slice. Bear in mind, 
however, that this will only 
apply when entering new 
dimensions within the Slice 
palette - if you decide to 
manually adjust the slice 
using the Slice Select tool 
this will be over-ridden, 


You can rearrange, resize and delete your 
slices as you develop your page layouts 


EK ven with a page exported to 
HTML you can still make 


further changes to the original .PSD 
file quite easily by making use of the 
Slice Select tool and the Slice palette. 
Resizing slices is as simple as 
selecting an existing slice with the 
Slice Select tool and dragging the 
anchor points to suit your preference. 
This method automatically revises 
the overall slice layout, amending 
any existing auto slices, for example. 
Similarly, within both Photoshop 
and ImageReady, you can also click 
and drag a selected slice to position 


POSITIONING SLICES 
Understanding the difference by X,Y,W and H 


If your layout relies on precise measurements or you simply 


want more control over your final exported table, then the 


Dimensions options found in the expanded version of the 


Slice palette may be just what you're looking for. The W and 


H fields are the most apparent, providing controls over 


the width and height of a selected slice, while the X and Y 


determine the pixel-perfect positioning of your slice. 


These measurements dictate the upper-left corner of the 


current slice and can be used to create more efficient tables 


by ensuring related graphics, such as our navigation bar, 


follow a uniform alignment, for example. 
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it elsewhere. Again, any surrounding 
slices will readjust automatically. 

For more precise control over your 
slice’s position you can use the 
arrow keys. This can be a useful way 
to accurately align slices that will 
share the same row within your final 
HTML table layout, for example. 

But for the ultimate control over 
your slices’ positioning you'll need 
to turn to ImageReady’s Slice 
palette. The additional options in this 
palette’s menu give you access to a 
range of controls that can’t be found 
within Photoshop itself. 


The Slice palette’s Dimensions options 
provide pixel-perfect control over the 
positioning and of an active slice 


Split Images Into Manag 


le Chunks 


Fixing slice sizes 


Creating fixed dimensions for your slices 
can help keep your layout consistent 


Geax slices by eye is an easy 
task, but it can result in a less- 
than-perfect HTML table. Bearing in 
mind that HTML is a linear mark-up 
language, it’s best to keep your slices 
within some kind of uniform grid 
pattern to avoid complex tables that 
may trip up older browsers. 

One solution is to use guides to 
help define the size and position of 
your slices. Alternatively, you could 
make use of the Slice tool’s option 
bar settings. From here you can set a 
fixed size or a fixed aspect ratio at 
which your slices will be created. 


SUBSLICES 


Another option is to duplicate your 
layers using similar tricks that you 
might employ when working with 
layer content. Holding down [Alt] 
whilst clicking and dragging a slice 
will automatically duplicate the 
active slice and position the copy 
where it is dropped, for example. 

Whichever method you use, you’ll 
almost certainly need to remove the 
odd slice when things don’t go to 
plan. The Edit > Undo method is a 
good start, but for existing slices the 
easiest method of deletion is to click 
on the slice and simply hit [Delete]. 


Understanding what happens when slices overlap 


So far we've considered User Slices (those defined when 


using the Slice tool) and Auto Slices (which fill in the gaps 


between). There is also a third type known as a‘Subslice’ 


which is generated when your create overlapping slices, 


Despite being numbered and displaying a slice symbol, 


subslices cannot be edited directly, because their dimensions 


are determined by the surrounding slices that created them. 


Subslices may cause confusion at first, but remember the 


Slice Select tools in both Photoshop and ImageReady 


provide options to arrange the stacking order of your slices, 
which should help to clarify the hierarchy of such elements. 


Snap-tastic 

In both Photoshop and 
ImageReady, you may find it 
useful to keep the View > 
Snap option checked when 
creating slices. 

Any duplicated or dragged 
slices will then 
automatically attach 
themselves to any existing 
boundaries - whether 
existing slices or guides — 
helping to create more 
efficient HTML tables. 


stacking options become available 
within the tool’s Options bar 
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The Slices menu 


Quick access 

In common with all the 
menus, you can access the 
Slices menu quickly by 
holding down the [Alt] key 
before hitting the 
corresponding (underlined) 
letter of the menu item in 
question. With the Slices 
menu this is the [C] key, 
because the [5] key is 
reserved for the Select option. 


Slices are an essential tool for web designers, 
so ImageReady has a menu dedicated to them 


T he ability to slice images is 
undoubtedly an important 
feature when designing web content, 
because it enables large images to 
be divided into more usable and 
downloadable chunks. However, 
print designers and photographers — 
along with the vast majority of other 
Photoshop users — will rarely use the 
feature, which goes some lengths to 
explaining why Slicing is best 
controlled by using ImageReady. 

In fact, the principle is so crucial 
to web designers that ImageReady 
boasts a dedicated menu just for 


UNDERSTANDING THE SLICES MENU 


More advanced options are possible through the 
Slices menu, such as the ability to link together 
slices, which are then indicated by the chain icon 


controlling slices. This menu offers 
some advanced controls that you 
won’t find in the main application. 


z The initial options 


available under the Slices 
menu allows you to 
automatically create slices 
based around any guides 
applied to your image. 


ensures that if you move 
one slice, any connected 
slices will move with it. 


sliced you can protect the 


load this at a later time if 
you wish. 
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ies The ability to link slices 


Once an image has been 


arrangement by saving the 
slice selection. You can then 


Common commands for 
the duplication and deletion 


of your slices are available in 
this part of the menu, along 
with more flexible controls 
for combining and dividing 
your existing slices. 


‘Promote to User Slices’ od 


becomes available when an 
auto slice is selected. It’s 
useful if you wish to retain 
the dimensions or attributes 
that an auto slice contains. 


The related stacking order, ia 
positioning and distribution 


together with sub-menus 


options are grouped 


for specific commands. 


Split Images Into Manageable Chunks 


Adding HTML text to slices 


HMTL text helps to keep content current 


and recognisable to search engines 
Open koago_product.psd (on the CD) 


t] within ImageReady. This is a typical web 
page layout - take a moment to familiarise 
yourself with the structure. If the slices aren't 


visible check the View > Extras option and koago_product.psd 
make sure the View > Show > Slices option is Use the Rongeuprodictnsd 
file to continue with this 
checked. You should be able to tell which walkthrough. The flattened 
elements will stay as graphics and which must layout has already been 
be converted to HTML text in the final layout. sliced and contains both 
graphical and text content. 
We'll need to configure this 
so that the generated page 
An actual conversion would be slightly renders the text as HTML. 
more complex, because of to the way 
the embedded graphics would need 
generating independently, but we'll 
concentrate on the main body text describing 
the t-shirt. Select the corresponding slice 
using the Slice Select tool and turn to the 
Slice palette to make the necessary changes. 
By default, ImageReady assumes that all 
slices should be rendered as images, but 
in this case we want it to contain text. Choose sicheruamenoie 
the No Image option from the Type drop- The drop-down colour 
down and the palette changes accordingly. options available through 


A text field appears, into which you can enter 
your copy. But before you do that amend the 


the BG field list web-safe 
colours by default. To choose 


an alternative you'll need to 

BG field to match the background colour used choose the Other option, 
within the cell (#BEE7E1). which prompts the standard 
Color Picker to define your 

preferred hue. However, you 

If you have a basic understanding of eer ean ee 

* ture by clicking directly 

- HTML you can give yourself a headstart within Heatea to the leor 
with the text by embedding basic HTML tags the drop-down arrow. 


such as the <b>bold</b> and 
<p>paragraph</p> elements we've included 
here. With the ‘Text is HTML’ option checked, 
the text is then embedded to provide the basic 
layout formatting. You can then use your HTML 
authoring software to finalise your layout. 
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Optimising slices 


Preview in 
ImageReady 

If you're not sure how your 
optimised settings might 
affect the actual rendered 
version then simply hit the 
2-Up tab at the head of the 
canvas. This displays the 
original and optimised 
versions side-by side. If your 
design is too big or your 
screen resolution won't 
accommodate such a luxury, 
just use the Optimized view 
by itself and toggle over to 
gauge the difference. 


Auto conversion 

If you're still not sure about 
the best way to go about 
optimising the layout then 
consider using the ‘Optimize 
to File Size’ option found 
under the Optimize palette’s 
menu. From here you can 
determine the final file size 
your page should be limited 
to, as well as making use of 
the Auto Select GIF/JPEG 
option to let ImageReady 
make such decisions for you. 


Focus Guipe — Apost ? 


Once your layout has been sliced, optimise 
each slice to make the fastest page possible 


B: slicing up your images and 
setting up the links or HTML 
content, you can deliver your work 
much more efficiently online. 
However, if the individual graphics 
haven’t been optimised efficiently, 
they could still appear distorted. 
Unlike Photoshop’s Save for Web 
dialogue, ImageReady has 
optimisation controls that are always 
available via the Optimize palette. 
Use the Slice Select tool to 
activate individual slices and modify 
the optimisation controls using the 
techniques you picked up back in 


SHOP KOAGO. 
‘and Furious t-shirt 


‘Tshirt incorporating the Fest 
loge created by Koago for the 
[fashion outlets, 200% cotton, 


Size: One size fits all 
[Colours Any, as long as its red 


Options on offer in the Optimize dialogue will 
depend on your chosen format - it’s just like the 
the Save for Web dialogue back in Chapter 3 
Chapter 3. Just remember to choose 
the most suitable format for the image 
and half the job is done for you! 


OPTIMISATION SETTINGS 


THE DROP-DOWN options at the head of the Optimize palette 
determine the file format best suited for the graphic being optimised. 
Your choice of format will influence the available options, although the 
preconfigured options are fully editable. 


THE JPEG method enables you to create low, medium, high and 
maximum quality images, while the Blur and Progressive options should 
be familiar from using the Save for Web feature within Photoshop. 


—) THE .GIF options also provide a range of controls that you've already 
seen in Photoshop's Save for Web tool. If you're not sure which options you 
should adjust, concentrate on reducing colour from the default settings. 


(| THe .PNG methods vary depending on whether you're converting to 
.PNG-24 or .PNG-8, but both variants have their comparisons with the 
.GIF and JPEG options, as you might expect. 


Split Images Into Manage ap 


Saving your slices 


Save your work for exporting, and ensure that 
you can return and make changes in future 


O nce you’ve gone through the 
processes of slicing, 
configuring and optimising your 
page layout, you’ll be ready to 
export the final results. Fortunately, 
this too is a straightforward task 
made available through the File > 
Save Optimized As option, which 
presents a familiar dialogue screen. 
From here you can determine the 
location and file name of the central 
HTML file or, if you prefer, choose 
to save the results as HTML or 
images only. Once you’ve made the 
necessary decision simply hit the 


Save button and ImageReady will 
process the file for you, creating the 
individual graphics and HTML to 
piece them back together again. 
Your HTML file is now ready for 
you to adapt further with the more 
specialised options of a dedicated 
HTML authoring package such as 
Adobe GoLive (see CD), but much 
of the coding can be completed 
entirely within ImageReady itself. 
Be sure to save your original 
artwork in the .PSD format so you 
can return to the file in future with 
your defined slices already in place. 


PREVIEWING YOUR PAGE 


Still not sure whether your page is up to scratch? 


Until your confidence improves you may want to preview 


your layout within a browser before saving your work. 


ImageReady’s Preview options are quite apparent — 


particularly the ‘Preview in Default Browser’ button found 
below the Color Swatch in the toolbar. Internet Explorer is 


the most common browser, so you'll probably find the 


button adopts the familiar‘e’ icon. Hit this and ImageReady 


will mock up the page complete with the containing HTML 


and graphics. This helps you to detect any problems with 


your layout. You'll also have access to the raw HTML below 
this, so you can see how your page is constructed. 
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Averting the 
unexpected 

The most common errors 
you'll face when exporting 
sliced pages are overlapping 
pages or overly complex 
table layouts. You can easily 
fix these by using the 
available options within the 
Slice Select tools options bar 
or by simplifying the page 
layout into a more regular 
Sliced grid pattern. 


Preview your pages within the 
browser, along with the supporting 
HTML code for the page 
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FINDING YOUR 
WAY AROUND 
IMAGE MAPS 


Image mapping was one of the first methods 
of adding functionality to web graphics. 
Plotting the coordinates used to be trial and 
error, but ImageReady removes the guesswork 


ike slices, image maps are 
another feature provided by 
ImageReady that is of specific 
relevance to web designers. The 
method is unique to HTML, which 
explains why there is no support for 
the feature within Photoshop itself. 
However, within the dedicated web 
design environment of ImageReady 
we can find plenty of tools and 
features for creating, modifying and 
saving image maps. These tools add 
a level of functionality that would 
ordinarily be impossible to achieve. 
You create an image map by 
plotting co-ordinates to an existing 
image. The defined area becomes a 
link — or hotspot — to take you to 


other parts of an image, or to a 
different destination altogther. 

The same kind of results might be 
achieved by slicing a larger image, 
but there are numerous unique 
advantages to the mapping method. 


When maps matter 
Slicing is a very destructive act to 
carry out on an image, and although 
this may be necessary for presenting 
larger layouts, it might not be 
required for smaller graphics such as 
page headers or banner ad graphics. 
In such cases, if you want to 
associate a link to a specific region 
of your image you are best turning 
to image maps. The method not only 


Using Image Hotspots As Links 


Bagi 


Page 72 Get to know the tools you 
need for working with image maps 


Page 73 The Image Map palette is 
crucial in setting up your web graphics 


<TITLE>Lectera2</TITLE> 
<META HITP-EQUIVe"Content~Type” CONTENT="text/htm! 
</HEAD> 

<BODY BGCOLOR#FFFFEF LEPTMARGIN=0 TOPMARGINO 1AH 
i<t-- ImageReady Slices (letters2.png) --> 


<IMG SRCe"inages/letters2.png" WIDTH=918 METGHT=34 
Mercers2_Map"> 


MAP UME" Lecce: 
<ARER SHAPE="circle 
HREF="circle.ntn* 1: = 

<ARER SUAPE="poly” ALT="Alternative for P shape” q 


Page 74 Learn to create an image 
map using the three shapes available 


po> 


ternative text for 0 4 
plank"> 


Page 75 Understand how to amend 
your image maps with a few trade secrets 


enables you to leave your image in 
its original form, but has much 
greater flexibility. 

Whereas a sliced image is made 
up of a grid of rectangular shapes, 
an image map can be defined as 


virtually any two-dimensional shape. 


Of course, you can create regular 
squares and rectangles, which are 
synonymous with graphical links, 
but the ability to define circular and 
even polygonal hotspots is unique to 
image mapping. 


Cut out the guesswork 
Netscape introduced image maps 
while the browser wars were raging 
and it was quickly established as a 


Page 77 Find out what's going on under 
the browser's bonnet with raw HTML 


Page 78 Get to grips with targets and 
frames using Photoshop‘s Help files 


standard web element. The initial 
advantage behind the method 
allowed designers to target specific 
elements within a graphic to trigger 
a link. For example, you might have 
a banner ad that enables the user to 
click directly on products of various 
size and shape, which then take the 
user directly to a relevant page. 
However, during the early days the 
only way to define image maps was 
by hand-coding, which meant a fair 
bit of guesswork was involved in 
defining the coordinates. More 
complex shapes would often take 
some time to recreate accurately, but 
fortunately ImageReady now makes 
the process much more efficient... 
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Chapter 7 


Image mapping tools 


Float your tools 

As with any of ImageReady’s 
nested tool sets, don't forget 
you can float the tools free 
of the tool bar by using the 
button at the foot of the 
grouped tools. This provides 
direct access to the 
available options, which can 
be reverted back to the tool 
bar when you've finished 
making your changes. 


Centre your circle 
When defining a circular 
region for a mapped area 
you'll often find it easier to 
create a more reliable circle 
from the central point. 

To do this, hold down the 
[Alt] key (Windows) or the 
[Option] key (Mac). 
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ImageReady has a collection of tools to 
help you create your first image maps 


| hankfully, ImageReady makes 
the creation of mapped regions 


as simple as making an ordinary 
selection within Photoshop. You'll 
find all the tools you need sitting 
next to the Slice tools in the toolbar, 
with dedicated tools for the three 
main functions we’ve outlined below. 
The tools are so simple to use that 
the only related options available — 
when either the rectangle or circle 
variants are selected — is that of 
fixing your area’s dimensions. 
The Polygonal Image Map tool has 
no additional options available at all. 


You'll find the Image Map tools grouped 
together next to the Slice tools within the 
ImageReady toolbar 

Other than that you’ll find it’s just 
a simple case of clicking and 
dragging to define the link region. 


THE INDIVIDUAL TOOLS 


“| THE RECTANGULAR IMAGE Map tool is the most basic on offer 
and enables you to define a region by clicking and dragging the 
opposing corners of the rectangular shape. 


“J THe Circce IMAGE MAP tool operates in a similar way to the 
equivalent marquee or shape tools, although you will always create a 
perfect circle - ellipse shapes are not possible. 


| THE PoLyGon IMAGE MAP tool has similarities to the equivalent 
Lasso tool within Photoshop, and allows you to create more complex 
shapes than the other variants. You can create shapes with multiple points 
- only when the two end points are conjoined is the region defined. 


| THE ImaGE Map SELECT tool is used to select individual mapped 
regions that have already been defined, allowing you to edit and adjust 
them through the dedicated Image Map palette. 


Using Image Hotspots As Links 


The Image Map palette 


Once you've defined your mapped region, 
head to the Image Map palette to configure it 


Ae with the Slice tools, 
ImageReady provides a 
dedicated palette to help create your 
maps. In fact, if you’ve already gone 
through the previous chapter where 
we looked at the Slice palette, many 
of the features in the Image Map 
palette should be familiar to you. 
Once a region has been mapped 
it can be activated using the Image The dimensions of shapes defined with the 
Map Select tool. Any attributes you Polygon tool don’t feature within the palette. 
enter into the relevant fields here Any adjustments need to be carried out directly 
will then apply to the specified area. _ to which your hotspot links. It can 


Absolute or relative? 
Ifa web address, or URL, is 
‘relative’ to the page it will 
locate the given file in 
relation to the current page. 
So, a link defined as 
page.htm references a file 
within the same folder as 
the original page. 

An absolute address, on the 
other hand, is used when 
directing a link to another 
server and will require 

the full URL including the 


: “ald i ‘HTTP 'prefix such as: 
These include the URL field, into be entered as an ‘absolute’ address iaaiitmeamettcane 
which you must enter the destination _ or one that’s ‘relative’ to the page. -co.uk 


THE IMAGE MAP PALETTE 


Aselected Image Map is 
indicated with a red border, 
as seen here around the 
circle. Inactive mapped 
regions are shown in blue. 


The Image Map palette is 
grouped with the Animation 
and Slice equivalents. It can 
be accessed via the Window 


menu if not currently 
available. 


The dimensions can be 
amended if necessary 
through the palette - in this 
case the circle is selected, 
providing access to the X 
and Y position as well as 
the radius. 


The crucial information 

that needs embedding is the 
URL or web address. The 
Name field can be changed if 
necessary, although this is 
mostly for coding purposes 
and can be left alone. 


The palette’s contextual 
menu offers a few additional 
controls for the alignment 
and distribution of your 
mapped regions, 


Like the Slice palette, the 
Target field defines the 
browser window into which 
the link will load, while the Alt 
text enables you to associate 
text with the link region. 
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Chapter 7 


Creating image map content 


letters.jpg 

Use the letters.jpg file to 
follow this walkthrough. 
The image contains a 
selection of children’s 
alphabet block, around 
which we can make use of 
the three image mapping 
definition tools. 


Lines and curves 

Itis impossible to merge 
curves and straight lines 
through Image Maps - this 
is a limitation of HTML 
rather than the software 
itself. However, you can 
easily get round such issues 
using the Polygon Image 
Map tool and roughly 
enclosing such complex 
shapes. Bear in mind that 


most users clicking on a link 


will aim for the centre. 
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Let's create a simple mapped region and 
familiarise ourselves with how the tools work 


Open the letters.jpg file (on your disc) 
a within ImageReady and consider how 
we might map such objects. The‘O’ is an 
obvious choice for the circle tool, while the ‘N’ 
can be reasonably covered by the rectangle. 
The’P’ is a little more complex, containing 
both straight and curved regions, so for this 
we'll make use of the Polygon Image Map tool 
to get the most effective results. 


First, lets consider the‘N’ shape and dig 
out the Rectangle Image Map tool. Drag 
from the top-left corner to the bottom-right 
and you'll notice a bounding box appear. 
Once the letter is contained within the box 
release the mouse button and you'll see the 
mapped region active and defined by the red 
box, which adds a little opacity to the image. 
This will not appear on the exported image. 


The ‘O’ shaped link can be done in much 
the same way, but using the Circle 
Image Map tool. However, getting an accurate 
position this way may take a little trial and 
error, so instead hold down the [Alt] 
(Windows) or [Option] (Mac) keys before 
clicking and dragging from the centre of the 
shape. Your circle is now created outward from 
this point, making it easier to cover the area. 


The final ‘P’ shape is better suited to the 
Polygon Image Map tool, so select this 
and start by clicking by the top-right corner of 
the shape. Follow the shape’s edge, clicking at 
corner points to establish anchor points. Try 
not to create too many anchor points or your 
exported code will be too complex. When you 
reach your starting point the cursor will show 
the completion with a small circle alongside it. 


Using Image Hotspots As Links 


Editing image map content 


Once a map is in place you'll inevitably want 
to tweak things to suit your evolving designs 


tl] Either continue from the previous page 
or use the letters2.psd file from the CD 
to complete the following steps. Amending a 
rectangular mapped region is a simple task 
requiring only the Image Map Select tool. 
Click on the map around the‘N’ and you'll see 
the anchor points appear, which you can 
adjust using the same selection tool. 


The same method can be used with any 
circular mapped region, but be aware 
that adjusting the map will resize your perfect 
circle. Also bear in mind that moving one of 
the side anchors will keep the opposite side in 
the same position, while scaling the remaining 
three sides accordingly. 


Adjusting image maps created using 
the Polygon Image Map tool also follow 
the same principals of dragging anchor 
points, although your actions are restricted 
to the currently selected anchor only. The 
remainder of the shape is not affected; only 
the moved anchor and the guidelines 
between its surrounding points. 


ts] You can remove anchors from polygon- 
[4 | shaped maps if you like. With either the 
Polygon Image Map tool or the Image Map 
Select tool, hold down the [Alt] key (on a PC) 
or [Option] key (on a Mac). Position your cursor 
near an anchor point you'll notice the cursor 
icon adapting to indicate the Delete option. 


letters2.psd 

This walkthrough continues 
from the previous page, but 
you can jump straight in at 
this point using the 
letters2.psd file which you'll 
find on your bonus CD. 


Quick duplication 
Another keyboard shortcut 
consistent with that of 
duplicating layers and 
image slices that can be 
used with Image Maps is the 
duplication of an existing 
map by holding down 

the [Alt] key (on a PC) or 
[Option] key (on a Mac). 
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Chapter 7 


Client and Server-sided maps 


What's the difference between these two 
methods and which one's best for you? 


76 


hroughout the web design 

world the terms ‘client’ and 
‘server’ raise their heads from time 
to time, threatening to baffle mere 
mortals. However, in reality the 
concept isn’t quite as daunting as it 
sounds. You should think of these 
terms in the same way as ‘remote’ 
and ‘local’, which describe whether 
site content is held on the user’s 
computer or on the server of the 
site’s host. The terms ‘client’ and 
‘server’ refer to similar principles. 

Image maps are defined by code 

that sets the coordinates for your 


Inline or background? 
Don't waste your time 
attempting to create image 
maps from images 
embedded into the 
background of your web 
page - this simply won't 
work. The only image a map 
can be associated with is an 
‘inline’ image, that is,an 
image included within the 
body of your layout. 


KNOW YOUR CLIENTS 


link regions. By default, 
ImageReady creates what is known 
as a ‘client-sided’ image map, which 
mean this code is embedded into the 
HTML of the page and it’s left to the 
user’s browser to recreate the effect. 
‘Server-sided’ image maps are 
used less and less, as they tend to 
be much too tricky to configure and 
less reliable. However, ImageReady 
does still support the creation of 
server-sided maps by enabling you 
to configure some of the Output 
Settings. We’ll look at these in more 
detail in Chapter 9. 


Do you know your NCSA from your CERN? 


ImageReady may support client-sided image maps, but 


you'll still need a reasonable understanding of the way they 


work. Most web designers will never need to create such 
outdated maps,as the simpler client-sided variant has 
become far more popular. If you do need to create server- 
sided maps for whatever reason you could battle through 


with ImageReady or make use of dedicated software such as 


Mapedit, which provides a few more specialised features. 
Admittedly, ImageReady will cater for the vast majority of 
your image mapping needs but if you do need to take 
things to the extreme, this package will help. 


www.boutell.com/mapedit 
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Mapedit from boutell.com is a 
dedicated image map editing tool that 
will help you take things to extremes 


Using Image Hotspots As Links 


Under the bonnet 


ImageReady protects you from the code, but 
are those little pointy brackets really that scary? 


| he ImageReady environment aa 
will never force you to face : 


your pages’ underlying code, but a 


little knowledge of what’s going on Avoiding the 
within the HTML will certainly pointy brackets 
Crary 4 Alittle understanding 

help. For example, it’ll come in always helps, but you'll find 
WYSIWYG web authoring 


handy if you need to tweak the code 
after the page has been exported. 
Unlike sliced images, an image 


programs such as GoLive 
(see demo version on 

your CD) and Dreamweaver 
make working with image 


map is defined by the code. This When previewed in the browser the Alt text is ‘maps quite simple. If things 
means you can make changes ata clearly legible when the cursor is held overa geta little too scary to 
later date directly within your web mopped fegion aaah a co 
authoring software without having The code below was generated in these features. 
to recreate the entire layout as you our previous example. It might look 

might when working with slices. scary, but you’ll soon figure it out. 


THE IMAGE MAP HTML 


Lines of code like this one 
provide comments to help 
you understand where code 
segments start and finish. 


The opening code is 
common with most HTML 
pages. It includes the <head> 
which establishes the page, 
and the <body> which 
contains the actual content. 


In common with many 
HTML tags, the map itself is 
defined with an opening 
<map> and a closing </map> 
tag at the end. 


The image itself is 
embedded inline as a regular 
graphic, although you should 
note the USEMAP attribute 
which associates it to the 
following map. 


Jet=~ ImageReady Slices (Letvers2.pag) —-> 


inages/Lettera2.png” WIDTH=912 KEIGHT=387 BORDER*O ALT=" USEUAP= 
"> 


The coordinates and 
remaining attributes within 
these <area> tags are used to 
further define the behaviour 
that you configured within 
ImageReady. 


The shapes themselves 

are easily distinguishable 
using the shape attribute, 
which will help you recognise 
which line of code refers to 
which object. 
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Chapter 7 


Targeting your links 


Named targets 

The target identities that 
we've mentioned here are 
the most common, although 
you can type any string 
within the field to configure 
the attribute. Coders will 
make common use of the 
feature when a link should 
affect a specific window or 
frame, for example. 


In the picture 

Frames are a HTML concept 
that allows multiple pages 
to be open at the same time 
within the same browser 
window. They‘re most 
popular use is in the 
creation of page layouts 
that require a static 
navigation bar, while text is 
scrollable. These are more 
than likely created by 
frames, or rather the 
containing frameset, which 
defines the area each page 
is assigned and the actual 
page that will be displayed. 
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What's the difference between 
a‘_blank’target and a‘_top’target? 


| he target field is an attribute 
that we’ve already encountered 


several times, but it’s one you'll need 
to drill into your subconscious. 

A target is the part of a HTML 
link that determines the browser 
window in which your destination 
link will be opened. You don’t 
actually need to enter anything at all 
for your target — a link will open 
automatically within the same 
browser window. On occasions, 
however, you may need to open a 
link in a new window or to override 
your page’s frame settings. 


cy ; = 


The Photoshop Help files are actually presented 
using HTML frames, so if you want to check 
them out just head over to the Help menu 


The targets below are offered 
by default when you define maps 
within ImageReady. 


TELLING TARGETS 


(LEFT EMPTY, the Target field will simply load the linked page within 
the same browser window as the current page. 


(WITH THE _ BLANK option selected, any associated link will open ina 
newly-created browser window, leaving the original page alone. 


(| THE _SELF option is more relevant to framed content, as any link with 


this attribute will refresh the current frame only, leaving remaining 
frames unaffected, 


( THE _PARENT attribute is another frame-specific option. 
When embedded into a link the new page will override the entire 
frameset, with the new page filling the browser window. 


(> SIMILARLY, THE _ TOP option replaces the current browser window 
with the links content offering similar results. This is often ignored as a 
target, due to it having a similar function to a default link. 
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Saving image map content 


Once your image maps are ready, output 
your work so that it can be viewed online 


\ N ] hen saving your image map, 
make use of the File > ‘Save 

Optimised As’ option. The File > 
Save options relate more specifically 
to the actual ImageReady file, 
although this too should be saved as 
a regular PSD in case of future edits. 

We looked at the ‘Save Optimised 
As’ dialogue when outputting our 
previous Sliced layout, although 
we’ve provided a little more detail 
below about the available options. 

If you’re exporting an image map 
to be included within an existing 
HTML page, then look back at the 


OPTIMISED OPTIONS 


<BODY BGCOLOR*#FFFFEF LEFIMARGIN=0 TOPMARGINeO MARGINWIDTE| 
<!-~ ImageReady Slices (letters2.png) --> 


<IMG SRC="inages/letters2.png” WIDTH=918 HEIGHT=387 BORDER 
#lecters2_Map"> 


MAP HAME="letters2_Map"> 
AREA SHAPE*"circle™ AL 
HREF="circle.htm” TARGET="_blank"> 

AREA SHAPE="poly” ALT="Alternative for P shape” COORDS=" 
756,287, 770,224, 867,226, 897,155, 887,01, 834,40" HREF="| 
TARGET="_blank"> 

KARER SHAPE*"rect ALT="Alternative text for N shape” COON 
HREF="rectangle.htm” TARGET="_blenk™> 
</une> 


"Alternative text for O shape” CO} 


<!-~ End ImageReady Slices --> 


If you need to transfer the output code, simply 
cut and paste between the comments of the 
exported code 

code on page 72. Notice the comment 
tags, which will help you cut and 
paste the relevant code into the page. 


( THE PRIMARY purpose of the dialogue box that appears should be 
familiar, offering you the opportunity of browsing through your system 
to specify a location and a file name for the exported work. 


“THE SAVE AS TYPE options allow you to determine whether your 
exported work should be saved as HTML and Images or the two elements 
saved individually. The combined output is the preferable option if you 


plan to create an entire page. 


THE SETTINGS listed next determine how the exported work will be 
converted and saved. These can be configured through ImageReady’s 
Output Settings, which we'll consider in more detail in Chapter 9. 


( THE FINAL SLICES option is greyed out when exporting image 
mapped content. The method doesn’t support the slicing concept 
because a map can only be applied to an entire image. 


Optimise your images 
As with any work that you 
export from ImageReady, 
don't forget to run the 
regular optimisation 
configuration through your 
image.|mage maps are 
contained within a single 
graphic, so you'll only need 
to configure the hosting 
image - don’t think you 
need to optimise each of the 
mapped areas individually. 


Missing images 

Ifyou cut and paste the 
resulting code into another 
page you'll need to ensure 
that the exported file is 
saved into the same 
directory as the target page. 
Otherwise you'll have to 
manually adapt the code to 
reference the image that the 
map relies upon. 
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Chapter és: 


ANIMATING 
GRAPHICS IN 
IMAGEREADY 


Delivering your work via the web is much 
better than traditional media in lots of ways. 
One of the most visually exciting of these is 
the support for animation 


In this chapter... 


O Fina your way around 
the animation palette 


Othe palette options 
menu explained 


Ocet to grips with 
the frame concept 


Ol construct your first 
web animation 


O simutate movement 
between frames 
using ‘Tweening’ 


D uring these times of 
broadband connectivity we 
tend to take the capabilities of the 
internet for granted. Since the 
advent of Macromedia Flash, 
websites have been packed with 
animated features, whether as part 
of a stylish navigation, to contain a 
streaming movie or just as simple 
eye candy that brings to life an 
otherwise static site. 

Flash is a dedicated application 
that’s way beyond the scope of this 
Guide, but we can add animated 
elements with our Adobe titles just 
as easily. Photoshop itself won’t 
provide any animation options, but 
ImageReady has more than enough 


support for creating basic movement 
on our pages through a file format 
known as the animated .GIF. 


What are animated .GIFs? 
The animated .GIF format was 
developed way ahead of Flash and 
was, for quite some time, the only 
method of including movement 
within a web page. The principle 
uses a number of .GIF images that 
display in quick sequence. 
Obviously, packing complex 
imagery into the .GIF format would 
result in a dramatic increase the file 
size, so you’ll need to keep things 
small in terms of image dimensions 
and animation time. There are plenty 


Animation Slice 
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Page 82 Meet the Animation palette 
and understand ImageReady’s options 


Page 86 Make the ball animation more 
realistic with a more natural motion 


of examples of animated .GIF files 
to be found online. They’re dotted 
around numerous sites, although a 
quick search in Google will bring 
up sites dedicated to the format, 
which should give you some idea 
of the limitations involved when 
creating your own versions. 

Despite issues with file size there 
is one distinct advantage that the 
format has over alternative methods 
of animation such as Flash and Java. 
This is that an animated .GIF file is 
as easy to embed into any web page 
as a regular graphic, making use of 
the standard <IMG> tag, as opposed 
to more complex embedded methods 
that the alternatives may rely on. 


Page 83 Improve your workflow with 
additional options via the palette menu 


Page 87 Turn here to discover what 
on earth ‘tweening’ really means 


Page 85 Create the beginnings of an 
animated bouncing ball. Here’s how... 


Leck iy 


% 
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Page 88 The Unify options in the Layer 
palette provide options for new content 


Creating animated .GIFs 
Thankfully, the creation of animated 
.GIF content is relatively 
straightforward within ImageReady, 
although it will still appear Greek 
until you’ve had some introduction 
to the basic principles involved and 
methods that the software uses. 

The following chapter should put 
aside any concerns that you may 
have over the creation of animated 
.GIF files. However, do keep in 
mind that more subtle animated 
features are often far more stylish 
and successful. So, you might want 
to think twice before creating that 
banner of garish flashing lights 
across your pages... 
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The Animation palette 


Keep it light 

More frames may mean 
your animation plays back 
smoother, but it will also 
increase the file size of your 
final image. Try to keep 


This palette makes more sense with some 
content in place, so here’s one we made earlier 


[ you're attempting to make sense 
of the Animation palette without 
an animated .GIF in place it can be 
confusing. With this in mind we’ve 
created an animation below of a 
bouncing ball, which should help you 
grasp the concept of using individual 
frames to simulate movement. 


things lean but don’t be 

too fussy about super- Many of the controls are tucked 

smooth movement. 
away toward the bottom of the 
palette. Here you’ll find a number 
of familiar options such as the 
shortcut icons and those that create 
and remove frames. However, there’s 
more going on here than meets the 

THE PALETTE EXPLAINED 


Se The ‘tweens’ shortcut isa 


There are plenty of examples of animated GIFs 
to see on the web. Just do a search through 
Google and you'll get an idea of what is possible 
eye — for example, you can 
determine the amount of time 

that each frame remains visible. 


The remaining controls & 


huge time-saver and helps 
to create more consistent 
movement by automatically 
adjusting content between 
a beginning and end frame. 


& The first option on the 


left of the palette controls 
the loop of the animation. 
This can be set to once, 
forever or to your own 
preferred specification. 


The playback controls 


look like standard tape deck 
controls. These include 
options to jump to first frame, 
move forward or backward 
one frame and play options. 


should also be familiar as 
standard Photoshop icons, 
offering options for 


[row =(—7omemecey 


duplicating or deleting 
the current frame. 


An animation is made of ae 


individual frames that are 
presented in a linear style 
across the animation palette 
- the frame furthest to the 
left is naturally played first. 


Below each of the frames a 


is a drop-down time value. 
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You can vary this value in 
individual frames to pause 
playback fora moment or 
two in time. 


More time-saving features are lurking under 
the Animation palette’s contextual menu 


M of the most important 
controls are available via the 
Animation palette itself, but you 
certainly shouldn’t ignore the palette 
menu. This contains more features 
that will improve your workflow and 
help you create smoother animations 
than you could ever make by hand. 
Many of the options are self- 
evident by their titles and 
descriptions, although we’ve listed a 
few below that are of particular 
interest. Arguably the most 
important of these must be the 
Palette Options, as it is from here 


Fiation Frames into Layers 


for Each New Frame 


As with all the palettes in both Photoshop and 
ImageReady, additional contextual options are 
available through the palette’s contextual menu 
that you can adjust the size of the 
preview thumbnails for a better idea 
of how your frames will appear. 


KEY ADVANTAGES IN THE PALETTE MENU 


—| THE TWEEN and Reverse options are particularly effective for the quick 
emulation of movement that returns to an original point. Making use of 
these options will help to create a perfect loop with certain animations. 


(| ALTHOUGH you can still optimise the graphic content through the 
usual channels, the Optimize Animation feature will trim away any excess 
pixels around your final image file, further trimming the file size. 


—_| AN ANIMATION is composed of a single layer that’s adjusted usually 
by moving its position. Flattening frames into layers will convert these 
movements into individual layers should you want access to these 


positions independently. 


() SIMILARLY, the penultimate options provide the ability to create new 
layers when new frames are created, or to make sure any additional 
content is automatically applied to existing frames. 
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The Animation palette menu 


Animated photos 
Photographic content is 
normally best optimised in 
the JPG format, but you'll 
need to convert this to GIF 
if you want any movement 
within such a file. This can 
lead to loss in quality if 
you're not careful with the 
optimisation process. 


Back to front 

With more experimental 
animations, running the 
frames backwards 

can sometimes produce 
some interesting results. 
The option for this is found 
under the palette menu - 
give ita try and if you don't 
like the results, simply 
undo the action to return 
to the original. 
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The Frame concept 


Flash frames 
Macromedia Flash uses the 
same frames principle 
although the vector 
application enjoys the 
luxury of a timeline to 
control playback and 
timing. In light of this the 
application actually uses 
key frames, which determine 
the moment an event 
should occur while 
movement occurs between 
them hence the phrase 
‘tweening: 


PERSISTENCE OF VISION 


If the idea behind frames is something 
of a mystery, we'll put you in the picture 


he idea behind the frame-based 


approach to animation used by 
ImageReady is a simple one that 
can be directly compared with film. 
A movie reel is made up of 
sequential images played in rapid 
succession, and an animated .GIF 
is no different. But unlike film, with 
.GIFs we can specify how long each 
cell is played for, creating pauses in 
playback if we like. This is an 
important aspect of the concept — 
otherwise we'd need to bloat the 
final file further with multiple 
images to create such an effect. 


Creating a smooth and realistic 
animation can take a little practice, 
but with a little trial and error 
you’ll soon get the hang of things. 
Just remember that any frames you 
delete are merely deleting the 
amended versions and not the 
original — in fact it’s impossible 
to delete your artwork from the 
Animation palette alone. 

Remember also that if you want 
your animation to cycle, then you 
will need to create content that 
returns to the same position as the 
first frame to do so seamlessly. 


How the eye is fooled into seeing movement 


Animation is based on the ‘persistence of vision’ theory, 


which dates back over 2,000 years. But it was only fully 


addressed in the early 19th Century by Mark Roget, who 


determined that the human eye is capable of carrying an 


after-image onto the image that follows. Subsequent 


experiments with early mechanical contraptions such as the 


Zoetrope and Kinematoscope were based around his 


findings and lead directly to the early animations of the 20th 


Century. Since then, animation has evolved into an art form 


in its own right but the central principal remains the same: 


a sequence of images fools the eye into seeing motion. 
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In 1914 Gertie the Dinosaur, by Winsor 
McCay was one of the first animations 
to grab the public’s imagination 


Creating your first animation 


Now you know how ImageReady simulates 
movement, let's make that ball bounce! 


“) Open ball1.psd (on your CD) in 

|__| ImageReady and access the Animation 
palette. The palette contains a single frame 
mirroring the initial image. Duplicate the 
frame using the shortcut icon at the foot of 
the palette and activate the ball layer. Click on 
the new frame within the Animation palette 
and, holding down [Shift], hit the down arrow. 


'"~) Repeat the process four times, making 
|__| duplicates only after the ball’s position 
has been moved. You'll find the ball should 
have reached the bottom to meet its shadow. 
Test the animation by hitting the Play button 
located at the foot of the palette and you'll 
see that the animation jerks when it restarts. 
We'll need to consider returning the ball to its 
original position to solve this problem. 


| Click the first frame and hold the [Shift] 
eal key before clicking the last frame to 
select all the current frames. Choose the Copy 
Frames option from the palette menu and 
then the Paste Frames option choosing the 


Leave the pasted frames selected and turn 
again to the palette options and choose the 
Reverse Frames option to invert the motion. 


'~| The duplication has completed the 
__ effect, although if you look at the frame 
sequence you'll notice that frame 7 duplicates 
the previous frame, which is only bloating the 
file size. Similarly, the first and last frames are 
the same, so we can safely delete one of these 
too and shave off some precious kilobytes of 
our final file before playing back the movie 
once more for a much smoother movement. 
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The new frame adapts while the first stays put. 


Paste After Selection option before hitting OK. 


ball1.psd 

Use the ball1.psd file from 
the CD to carry out this 
walkthrough. You'll notice 
the image is made up of two 
additional layers to the 
plain background - one 
for the ball itselfand the 
other for a shadow, 
providing some 
gravitational indication. 


Alternative animation 
Animation isn't limited 
simply to movement; you 
can apply layer styles or 
varying degrees of opacity 
toa layer during its frame 
transitions to create some 
impressive glowing effects, 
for example. 
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More imaginative animation 


ball2.psd 

You can use the same file 
that you created on the 
previous page for this 
tutorial, or you can dig out 
the ball2.psd file from the 
CD if you want to jump 
straight in at this point. 


Motion curves 

The Animation palette 
actually offers another 
angle on creating sucha 
smooth trajectory. If you 
imagine the ball thumbnails 
act as key points ona 
hypothetical line you can 
adjust their position by eye 
by recreating a smooth 
curve from such points. 


Focus Guipe — Apose PHoTosHor Cre, 


Our last walkthrough made the ball move; 
now let’s use some more advanced techniques 


Play back the resulting file from the last 
walkthrough - although the animation 
is nice and smooth you'll quickly notice lack 
of realism in the movement. The ball actually 
appears to bounce perpetually between an 
unseen ceiling and the floor. To get around 
this we'll need to consider how a real ball 
might actually bounce and attempt to 
replicate its movement. 


1 


>) To lose the feeling of a bounce at the 
[2 | top of the curve we could pause the 
playback slightly when the ball reaches that 
point. Select the first frame, which contains 
the ball at its highest point, and select the 0.2 
seconds option from the list that becomes 
available when you click on the time value 
beneath the frame. 


fi] Play the file again - at first glance the 
| effect seems worse than it was 
originally, but this is due to the lack of speed 
when the ball returns from its bounce. A 
physical ball bouncing will invariably travel 
upwards with more momentum, which we can 
emulate by removing some of the frames on 
its upwards journey. Remove frames 7 and 8 
and play back the movie to get the idea. 


') To further add to the effect you could 
jst] try removing the frame prior to the ball 
being at its lowest point (frame 5) and 
graduating the position of the third and 
fourth frames to smooth the motion as the 
ball descends. Such movement is impossible 
to illustrate within these pages, but open up 
the ball3.psd from your bonus CD to see the 
final effect in action. 


Get Your Images Moving 


Save time with tweening 


Why do things manually? ImageReady 
will ‘tween’ things for you automatically! 


ale he method is intended to fill in 
a smooth movement between 
two points, Macromedia Flash 
makes great use of ‘tweening’, 
enabling you to define two points 
and leave the software to figure out 
the rest, depending on time values. 
ImageReady provides a similar 
function, although you’ll need to 
specify the number of frames over 
which the effect should take place. 
Taking our bouncing ball example, 
we could have simply duplicated the 
original frame before positioning it 
into in the last frame, then selecting 


The Tween feature is available as an option via 
the Animation palette menu, as well as via the 


icon within the palette’s shortcuts 


Direction of motion 
The tween method is 
undoubtedly a quick way of 
creating smooth motion, 
but remember it can only 
calculate the required 
distance of movement 
between frames within a 
straight line of the two end 
points. For more complex 
motion you'll have to do 
things by hand. 


all the required frames and choosing 


the Tween option to complete the 
effect quickly and effectively. 


UNDERSTANDING THE TWEEN OPTIONS 


i You can also decide 


Adialogue box is then 


whether to restrict any 
adjustment to all layers or just 
the selected layer to ensure 
you don't alter static content. 


ia And don’t forget you can 


also tween attributes other 
that just the position - the 
opacity and layer styles can 
also be amended. 


oe To perform the Tween 


function, the most obvious 
point of entry is to make use 
of the shortcut at the foot of 


presented, enabling you to 
determine how the tween 

will be calculated, depending 
on your initial selection. 


To get started you'll need eo 
7 


to create the required 
number of frames and adjust 
the position, opacity and/or 
effects of the last frame. 
er es 


Once you've approved = 


your settings the frames 
between your first and last 
frame should revise 
themselves to create a 


the Animation palette. 


smooth motion. 
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Unifying layers 


Matching content 
The Layer > Match 
command is a related 
function to the Unify 
controls, which lets you 
apply the layer attributes 
for an existing state or 
frame to others in the 
rollover or animation. 


Saving animations 
When it’s time to save your 
animation make sure you 
choose the .GIF format, 
otherwise the exported file 
will remain static and all the 
hard work you've put into 
animating the content will 
be in vain. 
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Although not unique to animations, the Layer 
Unify options in ImageReady save headaches 


gh s you continue to experiment 
with animations in 


ImageReady and get your head 
around the concept of time adding 
another dimension to your work, 
you'll be grateful to the Unify 
options, found in the Layer palette. 
You'll soon find plenty of use for 
these controls — not just with 
animations, but also rollover buttons 
and any other elements you create 
that rely on time or numerous states. 
Using the various Unify controls you 
can introduce new content to these 
elements easily and with greater 


The Unify options are a subtle addition to the 
ImageReady Layer palette, located just to the 
right of the various lock icons 

control. We’ve outlined the Unify 
options below with some description 
that should introduce their functions. 


UNDERSTAND THE UNIFY OPTIONS 


PHOTOSHOP users will be initially baffled by the Unify controls, which 
are unique to the Layer palette of ImageReady, and are located below 
the Opacity slider at the head of the palette. 


THE UniFy LAYER POSITION button is found to the left of the three 
options and applies any changes you make to a layer’s position to all 
states in a rollover and all frames in an animation. 


THE UNIFY LAYER VISIBILITY button is contained next to this and 
has a similar function, except it controls the opacity of a selected item 
over the current frames. 


THE UNIFY LAYER STYLE button is the third option with the 
same principle but applies any layer styles you've created across 
the remaining frames, which can save some considerable time when 
recreating such an effect. 


You can alter the position, opacity and layer 
styles of your frames, but there are limitations... 


Z ~) Open the ball3.psd file and play the 
___| animation. You'll probably agree that 
the animation is looking much more realistic 
than when we first started. However, there is 
one more detail that would give it a final 
touch and that is by adding some dynamics 
to the static shadow. If we assume the light is 
coming from the top of the ball, then the 
shadow would get larger the higher the ball. 


'~) Let’s assume that the current shadow is 
>| about the right size for the ball being at 
its lowest position. We must therefore adjust 
the size incrementally over the remaining 
frames but if you do this by simply scaling the 
existing shadow with another frame selected 
you'll soon discover that this affects all the 
frames - there is no way of actually doing 

this without considering another approach. 


¥ T | This is because we cannot animate the 
ea dimensions of a layer without actually 
changing the base layer content. So instead 
what must be done is to create duplicate 
layers of the shadow and make changes to 
those instead. Select an alternative frame and 
make your changes to a duplicate, and then 
display the appropriate sized duplicate 
shadow to reflect the ball’s position. 


‘You'll find you can reuse the duplicate 
L | shadow layers for frame 2 to frame 7 
and frame 3 to frame 6, because they both 
contain the ball at the same height. Do this 
simply by hiding or revealing the required 
layer through the Layer palette within a given 
frame. Have a look at the ball_final.psd file on 
the CD to see how our version came out. 
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Know your animation limits 


balls3.psd 

This file carries on from 
where our last walkthrough 
on page 86 left off, so feel 
free to use your own version 
if you prefer. 


Added realism 

Why not adjust the opacity 
of the shadows to add to 
the effect? Check out 
ball_final.psd on the CD to 
see the completed 
animation with the 
adjustments made to 

the shadow in terms of 
both size and opacity. 
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SETTINGS IN 
IMAAGEREADY 


For more advanced control over the output 
of your work, turn to ImageReady’s Output 
Settings. These provide yet more powerful 
controls over the way your work is rendered 


ee onfiguring the preferences to 
any application is a process 
that can really make some dramatic 
changes to the way you work. The 
default settings of any software title 
are generally configured to suit a 
broad spectrum of users, but it’s only 
when you get under the hood of the 
application that you can decide 
exactly how you want it to perform. 
Photoshop and ImageReady share 
similar options for the primary 
Preference settings, which you'll 
find under the Edit menu of both 
applications. There are a couple of 
differences between the two, which 
we'll consider later, as we look more 
specifically at the Output Settings. 


Tricks of the trade 

In contrast to the main application 
preferences, the Output Settings 
provide more relevant controls 

over the way your work is exported. 
You can access these controls via 
the File > Output Settings menu, 
although they only become available 
once a file is actually open. 

It’s only when you dig into these 
options that you appreciate the full 
web design potential of ImageReady. 
For example, most professional 
designers make use of Cascading 
Style Sheets (CSS) to control page 
formatting and even layout whereas, 
by default, ImageReady creates 
output using more traditional 


For The Web 


lanti-alias Postscrot show Tooltips 
(2Saye Palette Locations Cipisable Warnings 
f2)Shaw Eont Names in English DlAuto-Update Files 
Cinotity when Done 


</HEAD> 


<BODY BGCOLOR=¢FFFFFF LEFTMARGIN=0 TOPMARGIN=0 


[<!-- ImageReady Slices (i 


final.gif) --> 


crx snce-inages/batt WIDTH=60 HEXGH 


<!-- End ImageReady Slices --> 


Page 92 The differences between 
the Output Settings and Preferences 


Page 95 Change the look of Image Maps 
via ImageReady’s Preferences dialogue 


techniques such as embedding 


Page 93 The HTML settings allow you Page 94 Set up your slices using both 
to determine the formatting of the code Output Settings and the main Preferences 


ward 
— 


Page 96 How HTML backgrounds Page 97 Create an organised site 
can help you stretch your designs with clear file-naming conventions 


ImageReady Output Settings work 


attributes into surrounding tags and _can greatly improve your workflow. 


tables to recreate page structure. 


Not only will it help you when 


This isn’t to say that ImageReady — within ImageReady, it'll also make 
is using outdated methods, but rather the process of modifying your web 


that it’s erring towards more 


established techniques. However, 


pages at the next stage easier, with 
software such as Adobe GoLive or 


professional designers have a better | Macromedia Dreamweaver. 
idea of developing technologies and Essentially, Photoshop and 


are quite capable of adapting the 


ImageReady are just tools to create 


software to integrate ImageReady’s an initial page, graphic or page 


output with a specific project. 


Thinking ahead 


element that you will continue to 
use within a dedicated web building 
environment. So with a little 


The good news is that this kind of consideration of your Output 
modification is not the sole preserve Settings you’ll be making sure your 
of web design professionals. A basic workflow is much more effective in 


understanding of how your 


the long term. 
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Output Settings vs Preferences 


These two options provide similar features, 
but you'll need to be aware of their strengths 


| nlike the general Preferences 
dialogue, the Output Settings 


within ImageReady relate just to a 


Quick access particular file, which is why they are 
lopment is unavailable unless a file is currently 
ImageReady’s Output e % o 
Settings via a keyboard open. But with a file available you’ll 
Fee is ; find access to the various settings 

t]+ eys (for, users) . . 
or [Option}+[Command} under the File > Output Settings 
+1HI keys (on the Mac). submenu. Regardless of which 


Similarly you can access 
either Photoshop or 
ImageReady’s Preferences 


method you choose you'll always 
have access to the parallel options 


quickly by using the 5 . 5 
[Control}+IK] (on a PC) or via a drop-down list, which bears 
{Command]+IK] (onaMac). some similarity to the way the 


Preference dialogue also offers 
access to related options. 


.»-AND PREFERENCES? 


Whereas the Output Settings cover options for a specific file, 
the main application Preferences dialogue enables you to 
determine how Photoshop or ImageReady actually 
perform. You can find either application's Preferences at 

the foot of the Edit menu, although if you're using OS X 
you'll find it contained within the main Application menu. 
There are many similarities between the settings in each 
program, but there are inevitable differences too — we'll 
mention a few of these in context of the Output Settings 
over the next few pages, so you can get the most out of 
both the software and the work it exports. 
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How do the Preferences enhance your working environment? 


The primary purpose of the feature 
is to set up the properties that your 
exported HTML and graphics will 
adopt. This can be as casual as 
whether your HTML tags are created 
using upper- or lower-case letters, or 
as crucial as determining whether 
your sliced layout is recreated using 
HTML tables or CSS methods. 

ImageReady will automatically 
revert to default settings for new 
projects, but it’s worth remembering 
that you can load and save settings, 
which can take some of the tedium 
out of the task over related projects. 


The ImageReady Preferences are 
similar to that of Photoshop, although 
there are some specific differences 


Fine-Tune Your Images For The Web 


HTML Output Settings 


It may not be a visual element, but the way the 
code is configured can be equally important 


T he first options found within 
the Output Settings are those 
that define the HTML code that 
underlies any web page. Some of 
the Formatting options are a simple 
case of preference, with no direct 
influence over the final appearance 
of the page. But the Coding options 
offer some more specific settings 
that can be crucial, depending what 
you're planning to do with your 
work next. 

We’ve pointed out a few key 
features below that should help you 
understand the implications behind 


TWEAK YOUR CODE 


You can access the various 
modes offered by the Output 
Settings via the drop-down 


Fie Est Format View Heb 
jeame> 


<HEAD> 
J<tITLE>ball_einal</TITLE> 

META HITP-EQUIV="Content-Type” CONTENTe"text/heml: charee! 
|</READ> 


<BODY BGCOLORSSFFFFFF LEFIMARGIN=0 TOPMARGINeO MARGINWIDTE: 


\[<!-- ImageReady Slices (bsll_tinal.giz) --> 


<IMG SRC="images/ball_final.gif™ WIDTH=60 HEIGHT#100 ALT=” 


I[<!-- End ImageReady Slices --> 


Including HTML comments around your created 
element will be useful if the thought of editing 
raw HTML fills you with dread 

some of the more specific 
configurations. If in doubt, leave 
things at their default settings. 


GoLive compatibility 

If you choose to reformat 
the code to be more 
compatible with GoLive 5 or 
earlier, then be aware that 
the concept of the ‘Selected’ 
rollover state is not 
supported, You'll either need 
to revise any of these 
elements, or upgrade your 
web authoring software toa 
more recent GoLive version 
(see bonus CD for a demo). 


Altering the case of the 
tags and their attributes has 
no direct affect on the end 


list at the head of the 
dialogue box. 


Similarly, choosing an 
Indent method won't alter 
the page layout, although 
indenting lines of code makes 
reading the source code 
much easier. 


‘Close All Tags’ can be an 
essential option to check if 
your final pages are to be 
powered through XML or 
CSS, which may require 
such strict rules. 


page and is apersonal 


preference for hand-coders. 


With the Include 
Comments option checked 
your code will be easier to cut 


and paste into another page. 
As such an entry will mark 
start and end points. 


Checking the ‘Include 

GoLive 5’ option will reformat 
the code to be compatible 
with earlier versions of 
Adobe's leading web 
authoring software. 
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Configuring your slices 


Visualising slices 

The ImageReady 
Preferences dialogue has its 
own entry for slices, which 
enables you to determine 
how your slices should be 
indicated as you work. 

For example, you could 
decide to change the line 
colour from its default blue 


HTML or CSS for recreating your sliced layout? 
It's a big decision, but don't get cut up about it 


| he Slices options may not have 
much influence over your 


pages’ appearance, but with a little 
configuration you can make the 
assets more recognisable when it 
comes to editing your pages within 
your web authoring software. 

One aspect that can cause 
problems is whether to recreate your 
layout using HTML tables or 


tomake working with Cascading Style Sheets. The former 

similar-coloured layouts o i 

amuch clearer task is more established, although many 
will argue that CSS is the way 
forward and more efficient coding 
is possible this way. 

KEY SLICE SETTINGS 


jen ere ace 


(Dsnow Lines ony Lie Color [Bue 


F Color Adjustments Numbers and Symbols 


is 
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The main decision to make 
when dealing with slices is 
the format in which your 
layout will be recreated - 
HTML or CSS. 


The ImageReady Preferences enable you to 
change the appearance of your slices when 
developing your layouts 


If in doubt, use HTML tables, 
because you'll need a fair bit of 
experience to fix any CSS problems. 


In this field you can 

decide whether empty cells 
will be populated witha 
created GIF or the non- 
standard No Wrap attribute. 


TD is HTML for a table cell 
(Table Data) and the field 
here allows you to define 
whether dimensions are 


included in such a feature. 


Creating anaming 
convention that you 


recognise will help you 
identify individual sliced 
graphics through the web 
authoring software. 
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Adding spacer cells is 
necessary with table layouts 
in which slice boundaries do 
not align. This prevents the 
table from breaking apart in 
some browsers. 


The Referenced field is 

active when the CSS method 
is selected, and specifies how 
slice positions are created in 
the HTML file. 


Fine-Tune Your Images for the Web 


Image Map settings 


Image maps are quite simple. Output Settings 


and Preferences help you find your way around 


T here aren’t really too many 
options within the Output 
Settings for image maps.This is due 
mainly to the fact that the method is 
primarily HTML driven, and so all 
the necessary configurations you 
may need are contained within that 
particular category. 

The only real decision you'll have 
to make is whether to use a client- 
or server-sided image map. 
ImageReady will default to the 
client-sided variety, which is the 
preferred option for virtually anyone 
creating an image map. But should 


you need to create the outdated 
server-sided version, controls are 
available here to make use of either 
the NCSA or CERN standards or a 
combination of both client- and 
server-sided maps. 

The placement option at the foot 
of the dialogue interface determines 
the position the actual code that 
powers the map within the HTML 
page. As HTML loads in a top-down 
manner it’s best to leave the default 
option of Bottom selected so that 
this element doesn’t interfere with 
the loading of the rest of your page. 


IMAGE Map PREFERENCES 


Clearer vision 
Checking the ‘Show Lines 
Only‘and removing the 
‘Show Bounding Box’ option 
within the Image Map 
options will keep visual 
indications around your 
mapped regions toa 
minimum. This may be 
preferable if you want a 
clearer idea of how your 
layout is progressing. 


Change the way image maps are shown through your designs 


You can find display options for your image maps within the 


ImageReady Preferences. Changes here will only affect the 


way you see your image maps during development, but this 


can make working with image maps much clearer.When a 


region is mapped ImageReady helps you identify the area 


by automatically laying a colour over the top, but this can be 


a problem if it’s a similar colour to that of your original image. 


You can always head over to the View > Show submenu and 


turn off the Image Map function, but this will make them 


invisible - instead a quick visit to the Preferences will allow 
you to choose ‘Show Lines Only’ to resolve the problem. 


Make changes to the overlay option 
if you want to keep a clearer idea of 
how your imagery will appear 
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Background settings 


Matte 

The background option of 
‘Matte’can be understood 
as the primary background 
colour that your page 
defines. The method is 
particularly effective when 
creating .GIFs with 
transparency that should be 
set against a patterned 
background. With the 
background matte set to the 
dominant background 
colour, transparent elements 
will blend more effectively 
against the complex 
background, for example. 


Images used as a background and images 
integrated into the design are very distinct 


5 here is an important distinction 
to be made between imagery 
that forms part of a page’s 
background and that which is 
embedded into the actual design. 
We'll look at the technicalities 
below, but there will be occasions 
when your sliced images don’t 
necessarily need to include such a 
feature directly, as it will prove to 
be inefficient and slow down your 
page’s delivery. 

As far as the Output Settings are 
concerned, you have the option to 
decide whether to view the file as an 


image or a background. With the 
former selected you can specify an 
alternative file that will be 
embedded into the background of 
the actual HTML page, keeping the 
foreground imagery separate. 
Therefore, the alternate background 
option will treat the entire design as 
a flattened whole when it comes to 
exporting your optimised version. 

You do have the additional option 
of defining a background colour via 
the BG Color drop-down, but you 
may find that a regular design will 
already specify this. 


THE HIERARCHY OF THE WEBPAGE 
HTML has more depth than you might think 


It’s all too easy to think of a web page as a two-dimensional 
object, but there are actually a number of levels you can use 
to your advantage. The base level of the page is always the 
background, which can contain either a HTML-defined 
colour or a tiled image. Above this is placed the content, but 
this too has a few additional layers. Most web pages are 
constructed from tables that form the basic page layout. 
These tables are made up of a number of cells that can also 


contain their own unique background content. This is 


The logo is embedded as a GIF with 
transparency, taking advantage of 
the different page levels 


rendered above the primary background, but you can just 
as readily place any type of content text above this. 
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Saving Files 


Make your exported files easier to identify 
by making changes to file naming methods 


G iving your filenames some 
kind of recognisable identity 
is crucial when you’re developing 
web pages. Not only will this make 
the URL, or web address, more 
logical but it will also help you 
identify specific content from the 
mountain of text and image files 
that quickly mount up. 

To keep things organised you 
should consider creating folders for 
various sections of your site. This 
will make it easier to locate files 
later, when using your web building 
software. You can set up a default 


FILE NAMING SETTINGS 


Setting your default file 
naming convention is 
achieved through a series of 
drop-down boxes. These 


8.3 naming convention 
Itused to be the case that all 
filenames should have an 
eight-character description 
followed by a three- 
character extension such as 
‘filename.doc: Although this 
is no longer essential, it’s still 
good practice to avoid 


Creating subdirectories within your site will certain tricky characters. 


help you locate content easily, without having 
to wade through reams of flattened files 


naming convention for your exported 


pages via the Output Settings, along 
with other options mentioned below. 


You can make use of easily 

recognisable separators such 
as hyphens or underscores to 
keep text strings identifiable. 


determine the syntax of your 
created files. 


You can break the file 


Keep all the options 


name into numerous sections 


checked within the Filename 
Compatibility area for 
obvious reasons, otherwise 


depending on your 


preference, but don’t forget 
to end things with the 


those Unix geeks will never 
see your pages. 


extension option. 


The remaining options are 
self-explanatory, although 
you'll have to enter the 
copyright info into the File > 
File Info field first. 


Placing reliant images in 
their own folder is a good 
habit to get into - you can 
change the default folder 
here if you prefer. 
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In this chapter... 


OD combine .GiF and 
.JPG content 


O create seamless 
background tiles 


O choose the right size 
for your web page 


O make your pages 
resize automatically 


O consider your users’ 
download speeds 


a Compress files 
further using 
Save for Web masks 


O Preview your 
finished work 


Pin Ged Gore 
TPSFOR GREAT 
WEB IMAGERY 


We've covered the main Photoshop and 
ImageReady features for creating web content, 
now let's turn to some common and 
not-so-common tricks of the trade... 


[ you’ve come this far you should 
have a good idea of the range of 
features that Photoshop and its web 
content ‘cousin’ ImageReady 
provide. But it’s only when you put 
this theory into practice that you can 
fully appreciate the entire process of 
creating web content — and that’s 
what we’ll be doing in this chapter. 

You’ve already learn that the 
software can create some of the most 
effective web design components, 
but you’ll need a better idea of the 
bigger picture before we progress to 
the final chapter. That’s where we’ll 
put everything into context and 
create a homepage and content page 
for a fully functional site. 


Thinking ahead 
Of course, you must remember that 
Photoshop and ImageReady are 
merely tools that create your initial 
graphical content. Although it’s 
possible to configure that content in 
a way that can be used within the 
context of a final site, you will need 
to have access and a little knowledge 
of web authoring if you plan to take 
your content further. After all, a 
collection of individual pages or 
graphic elements is no good to 
anyone; what you want to produce 
is a fully cohesive online presence. 
Photoshop and ImageReady have 
natural links to the Adobe web 
authoring package, GoLive (see trial 


Page 100 Matching .GIF and JPG images 
is possible with a little imagination 


Sais 


Page 104 Use guides to establish your 
canvas for more consistent layouts 


version on your CD), but your 
finished web graphics can just as 
easily be transferred to Dreamweaver 
or any other web authoring 
application; you’ll find that the 
techniques used are fairly universal. 
However, if you’re new to the world 
of web authoring, then you should at 
least have a headstart with GoLive, 
because the interface has a lot in 
common with Photoshop’s now- 
familiar workspace. 


Back to reality 

But before we get ahead of 
ourselves, let’s continue with this 
chapter, where we’ll point out a few 
tricks and tips that should help you 


Page 101 Master ImageReady’s Tile 
Maker filter and seamlessly tile images 


Page 106 Reference masks from Save 
for Web to dramatically reduce file size 


Page 102 How large should your page 
be to fit into the typical browser window? 


—- 
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Page 107 Testing your pages is 
an essential element of web design 


create some of the more common 
elements used in web design. 

We're not just looking at practical 
considerations — we’ll also point out 
a few theoretical points that will 
help you design better pages that 
will be more consistent when viewed 
across the various browsers and on 
different computer platforms. 

Having an awareness of typical 
browser sizes and screen resolutions 
will help you create content that 
avoids the cardinal sin of web design 
— sideways scrolling — and will also 
be as useful to you as some of the 
more practical techniques, such as 
selective optimisation of graphics 
within the Save for Web feature. 
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Merging .GIF and JPG imagery 


Retaining dimensions 
Ifyou use this method you'll 
find the JPG is incapable of 
defining the table 
dimensions asa 
background element.To get 
around this simply size the 
foreground .GIF to that 
required using transparency 
around the excess regions to 
force the table cell to size. 


What do you do if you can't decide which 
format is best? Use both, that’s what... 


EK arly in our introduction to web 
concepts back in Chapter 1 we 


stressed the importance of saving 
imagery in either the .GIF or .JPG 
formats, balancing quality with file 
size. However, this fails to take into 
consideration graphics that would 
benefit from both methods. 

Take, for example, a flat colour 
logo that is to be offset against a 
textured background. In this case the 
logo would be best suited to the .GIF 
format, with its background as a 
JPG. If we were to save such a file 
as a .GIF it would result in excessive 


MATTING 


file size, while a .JPG of the entire 
image would suffer from noise 
artefacts around the sharpened 
edges of the logo. 

But with a little imagination and 
some understanding of the way web 
pages are constructed, we can easily 
get around this by saving the two 
elements individually. We could save 
the background as a .JPG and embed 
this into the background of a table 
cell; while the foreground logo 
could be saved as a .GIF that 
supports transparency, allowing the 
background detail to show through. 


How to blend foreground and background images 


The method we've suggested above will work better if you 


save the foreground .GIF image with anti-aliasing matching 
the background colour. This can be done within the Save for 
Web feature by first checking the Transparency option and 
then choosing the dominant background colour from the 
Matting option. This will then create a border of pixels around 
the foreground .GIF logo, which will blend your object 
smoothly into the background. Without this anti-aliasing you 


run the risk that your logo will appear blocky and pixelated. 


Zooming into this logo shows the 
anti-aliasing clearly and the colour 
chosen from the Matte option 


However, with the matting in place the two elements fuse 
together seamlessly to provide the best of both worlds. 
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Creating background tiles 


Use lImageReady'’s unique Tile Maker filter to 
create seamless backgrounds from an image 


\ N ] hen you embed a 
background texture into an 
HTML page it will automatically tile 
itself, depending on the size and 
resolution of the viewer’s browser. 


This often results in irregularities 
where the tile recurs and causes an 


Efficient backgrounds 
A background needn't be 
created from sucha large 
image, as we've suggested 
here. You could create a 


. . background tile from an 

unwanted distraction from the page. image that is only I'pixel in 
Fortunately, ImageReady has a eA pee 

7 . example of this woul e I 
filter found under the Filter > Other When the image has been converted via the you were toembed a 
submenu, known as the Tile Maker, Tile Maker and embedded into a web page Ae earns ae ina 
é ® ie invisil ckground. Applying a 

that’s intended to tackle this pr oblem. background, the joins should be invisible giathenandeeatnga 
Unique to ImageReady, this filter is | approach. With the right imagery it background tile that's 800 
* . = A pixels wide by 1 pixel tall will 

easy to use; just be careful that your _ can be incredibly effective, as you Géatea tiled horizontal 
image is sympathetic to the filter’s can see in the example here. gradient across your page. 


THE TILE MAKER FILTER 


The default option for the | 
filter isto blend the edges of i'r a Lai 
the image. You can determine _ 


in terms of percentage how 


With our current settings, be 
the outside 10% of the image 
| has been redrawn based on 


| the original content to 


much of the image should _ smooth the join. 
be affected. L aot 
see] | The central part of the 
The Tile Maker filter is one | image remains faithful to the 

| of just a few filters that is (aaa original, although because | 

unique to ImageReady. | we've checked the Resize | 
| This is due to the web- | option this has been scaled 
| specific nature of the tool. | down somewhat. 


ae A A ee 


5] 
| With the Resize option Ba 
checked your image will be | 
scaled within the edge border | 
you've defined to createa 
"smoother transition. 


Choosing the Kaleidoscope 
option will transform the 
image into a more abstract 
but effective tile. 
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Establishing page sizes 


In the picture 

Although vertical scrolling 
isn’t as problematic as 
horizontal its still worth 
making sure more essential 
content, or at leasta 
summary, is visible at the 
head of the page. This way 
visitors to your page will 
have a good idea of what 
they can expect when they 
browse through the page. 


How we calculated 

The suggestions shown here 
for the different browser 
resolutions have been 
carefully tested across both 
Mac and PC platforms. 

They take into consideration 
not just the scroll and menu 
bars found within the 
browser, but also the 
Windows Start bar and 
Microsoft Office bars, should 
these be visible at the same 
time as the browser. 
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Avoid the cardinal sin of forcing your users to 
scroll sideways when viewing your web pages 


/ nlike working with print, 
where you have a defined 
boundary to a page, a web browser 
size is determined by a combination 
of the viewer’s monitor size, its 
resolution and the amount of real 
estate given to the active window. 
Given these criteria, it’s a task in 
itself to decide on the most suitable 
dimensions for your pages. 

Height isn’t much of a problem, 
as vertical scrolling is taken for 
granted, but width is an issue, as you 
don’t want content being lost off the 
right-hand side of your window. 


SIZING THE BROWSER 


Professional sites such as the BBC has been 
designed to fit into the expanded browser, 
which is running in 800x600 resolution 
We’ve looked at the main screen 
resolutions below and suggested 
which one might be right for you. 


| 640 x 480 pixels is the smallest workable screen resolution that 
some people - amazingly - still work in. But don’t assume you can use 
these dimensions literally, because scrollbars and browser toolbars 
demand their own space. If you're designing for these dimensions stick to 
around 580 pixels wide and 290 high. 


800 x 600 is a much more common resolution across the board 
and most web designers will target their pages for these dimensions. 
However, bearing in mind the scroll and menu bars it’s still best to 
assume only 740 x 410 pixels as a guideline here. 


| 1024 x 768 is fast becoming the standard resolution, although its 
still recommended you design for 800 x 600 by default, as this is more 
likely to be the lowest common denominator. But if you do design for 
this resolution keep things within 970 x 980, just to be safe. 


Elastic tables 


IN a panic over your layout dimensions? Then 
consider making use of dynamic table sizing 


EH lastic tables is a method of 
creating a page layout that 
automatically resizes to the browser 
window and is defined within your 
HTML authoring software. It relies 
on you configuring your table 
attributes using relative percentages 
to determine the widths, instead of 
absolute pixel sizes. But not every 
layout will work with this technique 
and you’ll need to be aware of a few 
issues before you can begin. 

Firstly, if your layout design relies 
on the kind of closely related 
integration so often associated with 


KNOW YOUR LIMITS 


You'll still need to keep a minimum size in mind 


Elastic tables may be a useful way of compensating for 
larger dimensions, although you'll need to have a good idea 
of what your minimum page width should be.Without this 
you risk your layout shrinking to such a degree that the 
content becomes unreadable. One way of achieving this 
within your web authoring software is to create an empty 
row within your table design and position a 1-pixel high 
transparent .GIF within it. The width of this .GIF determines 
the minimum width of the browser window. This way, 
should the viewer attempt to resize the browser window, 
the .GIF will keep the dimensions at a more realistic level. 


sliced layouts, then you’ll run into 
problems as your page runs the risk 
of breaking up as it expands. Instead, 
you'll need to consider a cleaner 
design making use of background 
colours instead of imagery to ensure 
such problems don’t arise. 

Similarly, when it comes to further 
modifying your layout within your 
web authoring software, you'll need 
to pay attention to the alignment of 
content within table cells. As a 
graphic tool ImageReady cannot 
configure this for you, but it can 
help you define the original page. 


Stretching graphics 

Itis possible to make use of 
imagery to fill elastic table 
cells, although you'll need to 
make sure they've been 
embedded into the 
background first. This will 
force an image to tile should 
the dimensions exceed the 
original image, so make sure 
you run graphics through 
the Tile Maker filter first. 


Take care with elastic tables and 
consider how your page layout will 
appear on extreme monitors 
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Perfect guide positioning 


Define your general layout using guides to 
help create perfectly consistent columns 


Creating guides 

Guides are created by 
clicking and dragging from 
the rulers surrounding 
Photoshop and ImageReady 
documents. |f the rulers 
aren't visible then you can 
turn them on via the View 
menu. It’s also worth 
making sure they‘re 
displaying measurement in 
pixels — double-click a ruler 
to prompt a dialogue box 
that will allow you to make 
changes to this default. 


What about 

the height? 

We've concentrated on the 
widths and not the heights 
of our table cells due to the 
fact that we cannot 
guarantee how much 
content will be contained 
within a page. The viewer is 
used to vertical scrolling and 
the height dimensions will 
invariably be determined by 
graphical content. Sideways 
scrolling, on the other, is 
really not acceptable so we 
need to control the widths. 
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Before you start any project, whether it’s 

print or web-based, you should spend a 
little time planning your layout requirements 
on paper. This will help you visualise how your 
project will develop, as well as shaping the 
structure of your page. Once you've decided 
on this you'll need to consider the browser 
width and how this will come to influence the 
row and column dimensions of your page. 


Create a new file using the dimensions 

740 pixels wide and 1000 high, leaving 
the resolution set to that of the monitor which 
is 72dpi. This canvas could form the basis of a 
page design, but will need a few guides 
dragged into place first. Using the sketch from 
the previous step drag guides into position on 
your page to roughly match those suggested 
by the original plan. 


With the guides roughly in position, 

make use of the Rectangular Marquee 
tool to gauge the widths. Drag a selection 
within the first column and turn to the Info 
palette to see the actual dimensions. Continue 
the exercise with the remaining columns, 
making a note of the data as you go. You can 
then use this information to round up the 
dimensions into more manageable values. 


To recreate the more accurate column 

widths we can turn again to the 
Rectangular Marquee tool. We decided the 
best dimensions for our layout would be to 
have columns of 20, 430, 10, 260 and 20 to 
create a two-column layout with margins and 
a central gutter. Using these dimensions you 
can set the selection tool to a fixed size and 
drag the guides into their new and more 
accurate positions before continuing. 


User connection speeds 


Keeping your web content lean in terms of file 
size will ensure it gets to the viewer quicker 


SHOP KoaGO, 
Fast and Furious t-shirt 


T he popularity of broadband 
connectivity is growing fast, 
but we mustn’t ignore users with 
slower connections. 

There’s no point designing a 
cutting edge site if a sizeable 
proportion of your visitors will get 
bored waiting for your lavish 


Site: One size fits all 
Colour: Any, as long a5 Re tad 


graphics to download. They will 


undoubtedly end up hitting the Back Tucked away toward the bottom-right of the 
button to find an alternative site. Preview pane within Photoshop's Save for Web 
We’ve listed the main connection feature is an indicator of the file download time 
speeds below to give you some idea recommend designing with the 56k 
of how fast your graphics will modem as the average, keeping page 
deliver, but as a safe bet we'd still file size down to less than 70kb. 


TYPICAL CONNECTION SPEEDS 


28.8KBPS is the lowest modem speed you should realistically expect 
to encounter. There are still quite a few casual internet users or owners 
of older computer systems using this for it to be ignored. 


56.6KBPS is the most common speed and one you should treat as the 
lowest common denominator. Keeping your page file size down to below 
70kb will help to ensure users have a smooth experience of your site. 


ISDN is an older mid-band technology that offers, on average, twice 
that of the regular dial-up modem at 128kbps. These users will enjoy a 
significant improvement to their delivery and can comfortably accept 
pages of around 140kb without too many problems. 


ADSL connection, or broadband, is fast becoming more popular with 
speeds averaging at around 512kbps. At such speeds users can 
download media-rich content with virtually no disruption to delivery. 


The bigger picture 
When we suggest you 
should try to keep the entire 
page file size down to less 
than 70kb, this includes the 
actual HTML and all the 
embedded graphics. 

File sizes in excess of this will 
download progressively 
slower the heavier your file 
content becomes. 


Download times 

Both ImageReady and 
Photoshop, via the Save for 
Web feature, will give some 
indication as to how long 
your layouts will take to 
deliver using the various 
connection speeds. Making 
use of these will provide an 
early indicator of any 
potential problems and 
shouldn't be ignored. 
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Save for Web masks 


angel.jpg 

Use the angel.jpg from the 
CD to make use of a nicely 
composed photograph, 
which would benefit from 
a mask to define the more 
important regions and 
reduce the file size further. 


Black or white? 

Don't forget that the 
affected regions within the 
channel mask appear black 
in the Channels palette, 
while white areas will 
remain unaffected. The 
feathering was added to 
smooth the transition 
between the foreground 
and background regions. 
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Using masks we can further optimise output 
through Photoshop's Save for Web feature 


Open the angel.jpg file from the CD and 

notice how the focal point of the image 
is towards the face, shoulder and bird. The rest 
of the image is of lesser importance to the 
picture. Running the Save for Web feature in 
Photoshop on the image as it stands would 
result in a file size of around 22kb, but we can 
bring this down further using channels, 
without compromising the quality. 


Using the Lasso tool draw a generous 

selection around the focal area - as we 
have here - and add some feathering of 
around 20 pixels. Invert the selection so that 
only the remainder of the image is selected 
and turn to the Channels palette. Create a new 
channel and you'll see that your selection 
turns into a hidden Alpha channel. 


Access the Save for Web tool via the File 

menu and configure the image to be 
saved to the JPG format on a medium setting. 
Leave the Quality slider as it stands but click 
on the button to its right to prompt the related 
dialogue box. From here choose the Alpha 1 
channel from the drop-down list as the 
channel we'll use to modify the Quality setting. 


We can now use the Quality slider 

within the dialogue to adjust the 
minimum and maximum quality. As the 
background imagery is already somewhat 
blurred, we can bring the minimum right 
down to 0% and the maximum to 5%. OK the 
settings and save the file as normal, but notice 
that the file size is almost half that produced 
by our standard conversion. 


Testing your pages 


Make sure youre not the only person who can 
see your pages the way you designed them 


esting is an important stage of 
any graphic design exercise, 


but none more so that when you’re 
creating online content. There are 
many obstacles that can affect the 
appearance of your layouts, and only 
time and experience will make you 
aware of them all. However, the 
following suggestions should give 
you a decent headstart. 

Although Microsoft Internet 
Explorer is now by far the most used 
web browser you mustn’t forget 
alternatives such as Netscape and 
Opera. View your files through these 


browsers as well as earlier versions; 
going back to the fourth generation 
should be taken as standard. 

Similarly, professional designers 
will have access to both Macintosh 
and Windows systems and, although 
buying a new computer just to test 
your pages may be a little ambitious, 
you can always ask a friend who 
may be on the other side of the fence 
to check things out for you. 

Both Photoshop and ImageReady 
provide remarkably sturdy code and 
assets, so any problems you might 
face will invariably be HTML-based. 


PREVIEWING YOUR WORK 


Get some early indication of any potential problems 


ImageReady provides lots of web-specific features to 


complement the functionality of Photoshop, and you'll also 


find it has a few advantages over its relation in terms of 


previewing your web content. The most obvious of these is 


the inclusion of the Browser Preview button, located on the 


toolbar. You can also test your pages on browsers other than 


that defined as your primary application. Use the File > 


Preview In > Other option to locate an alternative installed 


browser before you commit to the final export. This will give 
you a good idea of how successful your conversion has 
been, as well as an accurate indication of the overall file size. 


Seeing red? 

There's a slight 
inconsistency between the 
colours rendered on 
Macintosh and PC systems. 
If your designs contain 
subtle colour nuances you 
may want to get some idea 
of how this will appear on 
other platforms via the 
View > Proof Setting 

and choosing the required 
RGB value. 


ImageReady will not only preview 
your page in various browsers, but 
also provides details of its file size 
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In this chapter... 


O piscover the 
importance of 
planning your site 


O1 carefully define 
your page structure 


Olada images and text 
to your page 


O Slice the page 


Dadd rollover 
navigation 


C1) convert it all 
to HTML format 


DESIGNING 
YOUR OWN 


WEBSITE 


Put together a website for presenting your 
photographs online. First design the layout, 
then create templates to take things further 
within your web authoring software 


B y now, you should be feeling 
much more confident about 


your abilities at creating web content, 
having looked at all the key aspects 
of both Photoshop and ImageReady. 

So what better way of testing your 
abilities than to design a working 
site? A basic site needn’t be rocket 
science and can be created relatively 
easily given your new-found skills. 
However, you’ll need to realise that 
neither Photoshop nor ImageReady 
portend to be actual HTML editors. 
As we’ve said before, to create a 
functional collection of pages you’ll 
need to expand your skills further 
through titles such as Adobe GoLive 
or Macromedia Dreamweaver. 


What we can do, however, is to 
design the various page layouts 
using the Adobe graphics 
partnership. These can then be 
configured and exported into the 
basic structure of a page, which can 
act as a template for a basic site to 
be built around. 


Forward planning 

And the following chapter will do 
just that. Basing the design around 
a website for a photographer to 
display their work online, we'll 
create a number of templates that 
incorporate many of the skills 
you’ve picked up throughout this 
Focus Guide. 
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Page 110 Get a good idea of the job in 
hand before design work really begins 


Page 112 Precise asset positioning will 
create the most efficient layout tables 


Page 113 Plan your site's typography 
by emulating web fonts within Photoshop 


Page 114 Defining the layout slices 
forms the foundation of the HTML table 


We'll take things easy and explain 
the planning process involved when 
first creating a site. This should help 
you establish the design using a few 
tricks of the trade to keep your 
results consistent, reliable and 
efficient when converted into 
working pages. We’ll also add a few 
whistles and bells to make your site 
even more unique by incorporating 
rollover buttons, animations and 
image maps. These extras should 
take full advantage of your newly 
developed software skills. 

The process should help you hone 
these new skills further, as well as 
put them into a more practical 
context and give you some 


Page 117 Optimising graphics reduces 
file size and speeds up your site’s delivery 


Page 119 Finish the site off using 
dedicated web authoring software 


understanding of when certain 
techniques should be used in 
preference to others. 


Getting online 

As we’ve explained, there’s only a 
certain amount that Photoshop and 
ImageReady can do, but we’ll 
provide a few basic tips at the end 
that should give you a good idea of 
how to finalise your site. 

You'll also need to get hold of 
some web space on which to host 
your site, but that’s all you’ll need to 
make your images available to the 
online world. For the time being 
look at www.daze.org to see how our 
site could ultimately be developed. 
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Establishing the site 


site_plan.jpg 

If the thumbnail images of 
the page layouts shown 
here aren't quite clear 
enough, then take a look at 
the site_plan.jpg file from 
the CD. This shows the 
planned sketches in greater 
detail, along with some 
descriptions of how our 
ideas might take shape with 
the intended site. 


Browser Cache 

When a web browser visits a 
page it automatically makes 
temporary copies of 
embedded graphics within 
a‘cache'held on the user's 
computer. When the same 
graphics are used again 
within other pages the 
browser will intelligently 
load such images from the 
cache rather than 
requesting them from the 
server. By recycling your 
images in this way you can 
significantly improve the 
delivery time of your site. 
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Before we start pushing pixels, we need to 
have a clear idea of what our project is about 


HOME PAGE BAND PAGE 


Title Title 
Thumbnails Band details 


Band menu Gig information 

Site navigation Thumbnails 

Latest news Main image 
Image info 
Navigation 


= | The first step when creating a new site is 

__| to decide on your subject and the site 
structure. Our site is going to be for a music 
photographer to display their images online, 
although this can easily be modified to cover 
any gallery-type site. To keep the project 
simple we're going to consider a two-level site 
with a home page leading onto individual 
pages for each of the featured bands. 


“| With our basic structure decided we can 
| ~ | start to determine the kind of content 
that key areas of the homepage and the band 
Pages might contain. In this case, we'll need an 
eye-catching home page that will introduce 
the site and give a good overview of what the 
visitor can expect. Then we'll need a page that 
displays thumbnails and full-size images when 
these thumbnails are selected. 


We've created a forward-thinking home 

page that incorporates a few additional 
pages and areas that reach beyond the scope 
of our tutorial - by the time you've completed 
this chapter you should have enough 
experience to create these pages yourself. 
We've settled with the basic layout shown, as 
it provides key information and tempts users 
to delve deeper to see the actual imagery. 


The image page will be duplicated to 

_ cater for the various featured bands, 
but also for the individual larger images to be 
displayed. By taking advantage of the user's 
browser cache we can deliver these pages 
quickly, because supporting imagery is reused 
from one page to the next. We've also planned 
for a drop-down ‘jump to’ menu that will need 
to be created within the HTML software. 


Practical Project 


Establishing the page layout 


Before you transfer your sketches to Photoshop 


we'll need to put down some guides... 


Open the site_plan.jpg file and take a 

moment to familiarise yourself with the 
home page layout. Create a new file of 750 x 
500 pixels with a resolution of 72dpi anda 
white-filled background. Make sure your 
canvas rulers are available via View > Rulers 
and start to drag guides roughly into position 
to mark off the key areas of your layout. 


Using the techniques we looked at on 
page 103 use the Rectangular Marquee 
tool to gauge accurate positioning for your 
guides, making sure to keep any spaced areas 
consistent. The dimensions we used are 
shown here, using gutter spacing of 20 pixels. 
You can duplicate these or define your own — 
make use of the Fixed Size style using the 
same Marquee tool to achieve this. 


Before you continue, take a look back at 
the site_plan.jpg sketch for the bands 
Page. You'll notice there is a similarity with 
parts of the home page layout, so duplicate 
the home page file you've just created with 
the grids and adapt that slightly leaving the 
central vertical gutter in place, but adjusting 
the horizontal guides as required. 


We've simplified the layout further, 
4 | effectively dividing the canvas into four 
with a 20-pixel gutter between the sections, 
using a height of 110 pixels for the top row 
and 370 for the main body. Once you've done 
this add a simple 20-pixel border around all 
four sides of both the home and the band page 
guidelines to keep some breathing space 
between the page’s content and the browser. 


site_plan.jpg 

Use the site_plan.jpg file to 
get a clearer idea of how 
we're planning to lay out the 
basic structure of our site. 
This will give you a much 
better indication than is 
possible with these screen 
grabs alone. 


Can‘t snap, 

won't snap... 

Using the Fixed Size trick to 
Position the guides is useful, 
but there will be occasions 
when it simply cannot work. 
Attempting to positiona 
fixed size selection above or 
to the left of a guide is 
impossible, so instead create 
a temporary layer and fill 
the selection. You can then 
snap this shape to the guide 
and snap the new guide to 
the opposite side of the 
shape. Next delete the 
temporary layer to leave the 
guides in the perfect position. 
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Chapter 11 


Populating the homepage... 


guides_homepage.psd 
Use the file labelled 
guides_homepage.psd if 
you want to check how your 
guides for the home page 
match up with ours at this 
point ~ you can choose to 
either use our file or 
continue with your own. 


Keep it organised 

As your layout begins to 
grow it makes sense to not 
only provide logical names 
for your new layers, but to 
also group common layers 
within layer sets. This way 
you can find your assets 
much easier, keep your 
interface a little less 
cluttered and improve 
your workflow no end. 
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We can now start to put a few of the essential 
assets in place, prior to the creative process 


fT] Use either your own guides or the 
guide_homepage.psd to continue with 
the following steps. The most logical place to 
start is to add imagery to the layout, so use 
your own or dig out the sample images from 
the page 112 folder on the CD. To determine 
the correct dimensions and guides for the 
thumbnails simply divide the area by two and 
allow for another 20-pixel gutter. 


Adding the title text is another simple 
feature. We chose two contrasting fonts 
for the name and description and dragged 
them in place as our initial sketches 
suggested. Be careful to spot any ‘drop 
characters’ (those that fall below the baseline) 
and manually reposition them above the 
current guide. Create new ones if necessary to 
keep other text elements perfectly aligned. 


| Ignore the scroll box to contain the 

~_ Latest News and the jump menu for 
now, as these will be ultimately be created 
within the web authoring software. What we 
can do is create a new guide to define the 
region that will contain the jump menu and 
add the text labels that will act as navigation 
buttons to the secondary content pages. 


Ts] With the essential elements in place 

4 now is a good time to review your 
layout and make any changes to the proposed 
structure. Hide the guides quickly by using the 
[Control]+[;] (Windows) or [Command]+[H] 
(Mac) to get a clearer view of your layout. 
Save the file before continuing - this ensures 
that you have a good place to revert back to 
later if necessary. 


Practical Project 


...and the content page 


We can save time when creating the content 
page template by reusing existing elements 


After saving, leave the previous home 
page layout open and, if possible, open 
up the sketch layout (site_plan.jpg) to remind 
yourself of the layout for this new page. Open 
the empty file containing the guides for the 
bands page, or use guides_bandpage.psd 
from the CD. You may need to rearrange the 
files so you can access them all, but don’t 
worry if you can’t see all the files in full. 


~ | Start by dragging and copying existing 
|= elements that we can reuse from the 
home page. These include the title and 
navigation, which can be positioned to match 
the original sketch. Remember to recreate 
guides to catch any ‘drop characters’ within 
the title. Copying such elements to the new 
file is as simple as dragging and dropping the 
relevant layer onto the new canvas. 


r ~ | The imagery can be added using the 
3 
same techniques as on the previous 


AITO 


@ the ICA, London = 10 January 2004 


page - this time use those from the page 113 
folder on the CD if you don’t have your own at 
hand. Again, we calculated the required size 
for the thumbnails by using a little basic 
maths; using dimensions of 50x50 pixels with 
a 20-pixel space between them to make four 
thumbnails fill the 260 pixel wide area. 


Adding the remaining text labels should 
be straightforward enough, although a 
little consideration must be made when 
emulating text that will ultimately be included 
as HTML. Use a web-safe font such as Verdana 
as we have here, and size it to your preferred 
dimensions. Then set the anti-aliasing to None 
to emulate the way the text will appear as 
HTML. Save the file before continuing. 


guides_bandpage.psd 
Locate the filenamed 
guides_bandpage.psd from 
the CD if you want to make 
use of the version that we 
created earlier. 


Quick copy 

If you've organised your 
layers into layer sets you can 
save some time by simply 
clicking and dragging entire 
layer sets over to your new 
canvas. Not only will this 
duplicate multiple layers at 
once, but the positional 
relationship between 

the individual layers will 

be retained. 
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Slicing the layout 


114_homepage.psd 
You'll need to revert to your 
homepage layout for this 
section; although if you 
prefer to jump in at this 
point then make use of the 
114_homepage.psd file 

on your CD to continue. 


Asound structure 
Leave the border slices and 
the central gutter as user 
slices; don’t turn them into 
auto slices. This is so we 
have a clearly defined 
framework around our final 
page that will help to 
recreate the table more 
reliably and help to position 
the contained content 
more accurately. 
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The basic design is now complete, so we can 
determine how we're going to slice things up 


fh Return to the home page layout to 
define the sliced regions. We've kept the 
design at a minimum so as not to complicate 
matters, but we'll need to balance graphical 
content with empty table cells that would be 
better suited to simple HTML background 
colours. Start working from the outside in - 
form a frame around your page by making 
column and row slices of the empty border. 


qT] Next, cut three large rows to incorporate 
“| the head content, the images and the 
lower region. Then, create effectively three 
columns by slicing each row up to the central 
column from both the left and right sides of 
the layout. This should leave three large slices 
on either side of a central column that’s 
formed by the central gutter. 


qe) You can now create slices around the 
~_| site name and description at the head 
of the page. Then zoom in close to the lower 
navigation and isolate each of the three 
entries into their own slices. Also provide 
sliced areas where the HTML components of 
the drop menu and the inline frame can 
appear by referring to our original sketches. 


Cut around each of the thumbnails to 
define these areas as user slices. Once 
complete, all the page components should be 
covered. However, to create a more reliable 
HTML table it's worth going over the empty 
slices and deleting them. This will convert 
them back into auto slices and keep the 
amount of code required to recreate the page 
toa minimum. 


Practical Project 


Configure the slices 


Decide which areas will be created as graphics 
and which as efficient HTML background color 


a By this point the image should be sliced 
and ready to configure, but check out 
the 115_homepage.psd file from the CD to 
make sure your slices match up. The next step 
is to make the final page more efficient by 
configuring empty slices to contain HTML 
colour rather than actual images. But before 
we do that, hide the layers that contain the 
main image and the thumbnails. 


fr] It’s possible to configure the individual 
slices within Photoshop, although there 
are more efficient methods. Transfer the file to 
ImageReady using the button at the bottom 
of the toolbar and access the Slice Select tool. 
Click on all the blank slices while holding 
down the [Shift] key and you'll notice selected 
cells change colour to indicate their status. 


qs] Leave them selected and dig out the 

“| Slice palette, changing the Type field to 
No Image, unchecking the ‘Text is HTML’ 
option and selecting a background (BG) 
colour of white. To do the same thing within 
Photoshop would have involved configuring 
each of the 28 slices individually, so carrying 
out this trick within ImageReady will save you 
plenty of time in the long term. 

qe] Use the same technique to select the 

[4 | remaining slices containing the site title, 
description and navigation buttons. Rather 
than change the Slice attributes, turn instead 
to the Optimize palette and configure these to 
the .GIF Web Palette option from the main 
drop-down, leaving the default configuration 


alone. Preview the page and you'll see that the 
total file size for our assets is barely over 6kb. 


115_homepage.psd 
The number of slices 
required — even for a simple 
page like the one we're 
working on-—can be 
bewildering. But don't panic, 
you can check out the 

final sliced version on your 
bonus CD by digging out 
115_homepage.psd. 


Why lose the images? 
We've hidden all the image 
content apart from the titles 
and navigation on this 
page, as these will be 
included separately in the 
final page build. This is so 
that we can easily replace 
them as the site is updated 
without having to recreate 
the entire page. 
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Making the navigation rollover 


116_bandpage.psd 
We've applied the same 
processes to the band page 
as the home page from the 
previous steps, and included 
the file 116_bandpage.psd 
on the CD for you to follow. 


Link location 

When you create a rollover 
graphic you'll ideally need to 
include a destination for the 
link. Don't worry if you 
haven't decided this during 
the design stage, as 
ImageReady will 
automatically insert an 
empty link that can be 
amended easily eitherata 
later date or via your web 
authoring software when 
you come to use the pages 
as part of a site. 
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Our site will draw attention to its web links 
by making them change colour on rollover 


fr] Run through the previous page 

|__| again with the band page or use the 
116_bandpage.psd file. Take a moment to 
check out the text slices, as we've embedded 
the text as HTML through the Slices palette. 
You might also find it easier to see your sliced 
content if you change the Sliced Preferences 
to ‘Show Lines Only’ as we have here. 


The navigation graphics will benefit 
from having rollover behaviours. This is 
a standard feature for links and helps the user 
identify their purpose. Starting with the About 
graphic, activate the slice containing the 
proposed button using the Slice Select tool. 
Then head over to the Rollovers palette 
(Window > Rollovers) and click on the ‘Create 
Rollover State’ icon at the foot of the palette. 


f3] You'll notice this action creates a new 
layer within the Rollover palette, which 
contains the Over state of the image. Find the 
About layer within the Nav layer set and 
duplicate the layer. Don’t edit this any further, 
but take a look at the Rollovers palette. Where 
the original and duplicate are visible together, 
the graphic takes on a slightly stronger look, 
which is fine as a subtle effect for our rollover. 


fa] To complete the effect select the 

| “| Normal state from the Rollover palette 
and make sure the duplicate image is hidden, 
while both are visible for the Over state. Test 
the page using the Preview button within the 
ImageReady toolbar and roll your cursor over 
the graphic to see the effect in action. All you 
need now is to repeat the process for your Blog 
and Links graphics before you save the file. 
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Optimising the images 


Time to make our assets that little more 
efficient, so our final site is the fastest around 
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ft] At this point you may be thinking our 
site is looking a little bare. If you have 
more time (than we have pages!) you might 
want to play around with adding more design 
elements, but if we're going to complete 
things by the end of this Guide we'll have to 
start bringing things to a close. Open the 
117_homepage.psd file back in Photoshop, 
as it's time to save the individual graphics. 


f2] Dig out the layer containing the main 
| image and Select > All. Copy the 
selection and then create a new file via the 
File menu. The dimensions specified for your 
new file should automatically match the copied 
image, so OK the settings and Edit > Paste to 
create a separate file of the main graphic. 


We can now run the isolated graphic 
through Photoshop's Save for Web 
feature, found under the File menu. As the 
image is a photograph and best suited to the 
JPG format, choose the JPEG Medium option 
from the Settings drop-down. Check out the 
2-Up view and you'll see how the image has 
reduced from 214kb to a more efficient 8kb. 


|) Save the file in a folder named Graphics 
|=) that sits inside the folder that will 
ultimately contain the final site, and repeat the 
process for the remaining thumbnails. You can 
also run through the process using the images 
contained within the band page layout if you 
like - saving these to a logically named sub- 
directory of the Graphics folder will make them 
easier to find using web building software. 
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117_homepage.psd 
We've created the rollover 
graphics and updated the 
homepage PSD file, which 
you'll find on the CD as 
117_homepage.psd. 

You can use this to continue 
with the following steps. 


Why bother? 

Although we could have left 
the images in place and 
exported the final page, 

it’s important you 
understand how to take 
images out of a larger 
design. When it comes 
round to updating the page 
to include new images it is 
much easier just to replace 
the images rather than 

go through the process 

of configuring your 

entire page. 
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Putting the pages together 


HTML or HTM? 

There may be some 
confusion when you save 
web pages via Photoshop or 
ImageReady, as both titles 
will default to using the 
HTML extension for a web 
page. Your web authoring 
software may prefer the 
more common and shorter 
HTM extension, but you can 
safely change this one way 
or the other quite freely, as 
they are effectively one and 
the same. The browser will 
understand both without 
any difficulty. 


Templates 

We concentrated on 
creating the home page as 
aunique page, while our 
band page could be reused 
to contain different content. 
Applications such as 
Dreamweaver and GoLive 
have support for templates, 
which make updating your 
site even easier — if elements 
such as the jump menu are 
embedded within a 
Dreamweaver template, for 
example, you'll be able to 
change just the template to 
automatically update any 
of its reliant pages. 
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With assets created, here’s how Dreamweaver 
might be used to create the final page... 


Te Now that the basic page is complete we 
can export the file to create the HTML 
page and associated graphics. To do this in 
ImageReady we click on File > ‘Save Optimised 
As‘ and enter a logical file name before 
locating a suitable location within the folder 
that contains our site. The ‘HTML and Images’ 
option is selected from the ‘Save As Type’ field 
and the Save button is pressed to allow 
ImageReady to convert the file. 


The file is then available for us to open 

within some web authoring software 
such as Macromedia Dreamweaver (or GoLive, 
see demo on your CD) to continue creating 
the specific web content that’s beyond the 
scope of Photoshop and ImageReady. Using 
the images we optimised previously we can 
bring these into play by referencing them 
from the relevant table cells, for example. 


i] You may have been wondering how to 
format the text within our page. This is 
something that can only be emulated within 
Photoshop or ImageReady. We could embed 
HTML and format the text through the <font> 
tag, but this is outdated. Within your web 
authoring environment you can attach a 
Cascading Style Sheet to automatically take 
care of any HTML text elements in one click. 


fa] Even the insertion of something that 
lead may appear quite complex, such as our 
‘jump menu’ is made simpler using dedicated 
web software. Learning how to use your 
chosen web authoring program may prove to 
be another hurdle to overcome, but at least 
Photoshop and ImageReady have got you off 
to arunning start. 


Practical Project 


The end results 


You've finally reached the point where you can 
save the final page and view it in the browser 


\ N ] ell it’s been a long trek but 
you should now have a 

much clearer idea of how to design 
and create your own website using 
Photoshop and ImageReady. Using 
these tools the whole process is 
much simplified, as we’ve 
discovered. A fundamental page is 
created, which can then be taken 
into more dedicated web authoring 
software to have the finishing 
touches applied. 

You can check out the final site 
that we’ve created here at 
www.daze.org, or you can view the 


THE HTML HOME PAGE 


The final content page when viewed through 
the browser has a clean appearance that hides 
the complex table that we created 


pages in their finished HTML 


page_final 

Open up the page_final on 
the CD and check out the 
index.htm to see how the 
home page might look 
within the browser. The links 
won't take you anywhere, 
but if you want to see the 
final site then head over to 
www.daze.org and see 
how the designs we've 
started here could be 
developed further. 


form by opening up the pages_final 


folder on your bonus CD. 


layout remains invisible, 
but holds the entire page 
together and provides a 
structure in which the 


ie The actual HTML table 


embedded into the page 


content is placed. 


pe Variable imagery was run 


through the Photoshop 
Save for Web feature and 
can be easily changed on 
our final page. 


il Subtle rollovers images 


were created from the site 
navigation graphics to help 


Regular site graphics were | 


layout, with optimisation 
settings configured directly 
within ImageReady prior 
to export. 


The thumbnail images can | 


be turned easily into links 
either through ImageReady 
or through dedicated web 
authoring software. 


We left adequate space aa 


within the design for 

| additional elements such 

as the jump menu and the 
inline frame, which cannot 
be created within Photoshop 


highlight their function. 


or ImageReady. 
ees 
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Here's how to get the most from the disc 
that accompanies your Focus Guide 


ES access the resources and 
files on this disc, including the 
huge collection of fonts and 
exclusive video tutorials, first insert 
the CD into your drive. Whether 
you're using a Mac or a Windows 
PC, the disc will work equally well. 
If the disc interface doesn’t run 
automatically, look at the opposite 
page to find out how to start your 
installation manually. 


Before you go on 
The first item that should appear 
on your screen is the disclaimer 


window; here you’ll need to click 

on ‘I Accept’. Please remember that 
this disc has been scanned and tested 
at all stages of production, but — as 
with all new software — we still 
recommend that you run a virus 
checker before use. We also 
recommend that you have an up-to- 
date backup of your hard disk before 
using this disc. Future Publishing 
does not accept responsibility for 
any disruption, damage and/or loss 
to your data or computer system that 
may occur while using this disc, or 
the data and programs on it. Please 


ADoBE GOLiIvE CS (TRIAL VERSION) 


Try the latest version of GoLive 


Adobe GoLive CS software delivers everything you need to 
create professional websites. It not only works seamlessly 
alongside Adobe Photoshop, but also with Adobe Illustrator, 
and Adobe Portable Document Format (PDF) files directly 
within GoLive. This means that there's no need to switch 
between various applications. The software helps you to 
maximise your productivity with a creative Web design 
environment that you can customise to suit your style. It is 


now easier to design without compromise using powerful 


Adobe's all-new version of the popular 
web editing package is compatible 
with other Creative Suite products 


tools that support industry standards. The trial version on 
your CD will work without limitations for 30 days. 


www.adobe.com/products/golive/main.html 


consult your network administrator 
before attempting to install any 
software on a networked PC. 


Installation 

Once your CD interface has loaded, 
you can access any of the files, 
software and other resources 
included directly from your CD. 
Simply click on the animated 
‘Click’ link and choose the section 
that you’re interested in from the 
menu. Our video tutorials require 
the latest QuickTime Player, from 
www.apple.com/quicktime/download. 


TUTORIAL FILES 


On Your CD-ROM 


If you have a query about your 
disc, email our support team at 


(support@futurenet.co.uk) for help. 


If you want to talk to a member of 
the team, call 01225 822743. 

Note that we can only provide basic 
advice on using the disc interface 


and installing the supplied software. 


We cannot give in-depth help on 
specific programs, or on your 
particular system configuration. 


Starting your 
installation manually 
PC users: click on the 
Windows Start button and 
click Run. Then click Browse 
and go to the CD directory 
in My Computer. Look fora 
file called PFGi.exe and 
double-click it. Then click OK 
in the Run dialogue, and the 
CD should then load up. 
Mac users: Double-click the 
disc icon, then double-click 
StartMAC or StartOSXx, 
depending on which 

OS you're using. 


Access files that will help you throughout this Focus Guide 


As you progress through this Focus Guide you'll often notice 
a disc symbol in your sidebar, letting you know that a relevant 
file is available on your cover CD.We've made it easier than 
ever to access these files from our new-look disc interface. 
Simply click on the animated Click icon, then select Tuorials > 
Tutorial Files and click on the ‘Open Tutorial Files’ link. 

This should take you directly to the folder that contains all 
the files that we've mentioned in the course of this Focus 
Guide. These will give you an ideal starting point for our 
walkthroughs, and — in the unlikely event that you get stuck — 


will show you how your images should be looking. 


You can now navigate to all the files 
that we've mentioned in the Guide 
directly from your disc interface 
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QuickTime video lessons 


The fastest and easiest way to learn is to 
sit back and watch an expert explain it all 


\ \ ] e’ve had a great response to 
our series of QuickTime 


video lessons, and this month’s é 

Chris Schmidt instalment won’t disappoint! George |% 

This month's video tutorials * = Ks 

Rav Boon ai eiseticr by Cairns has stepped aside for this wi 

Chris Schmidt, who also issue to make way for our author ag! 

wrote the main bodyofthis and web specialist, Chris Schmidt. ay 

issue. Chris is a professional SF 

web designer anda regular If you’re a Photoshop and i 

contributor to magazines o poy ewes 

Tehae CoAnarAS ImageReady beginner Chris’s video 

and net. lessons are the ideal place to start. In oui handy QUERTIONS GiaTela Web ckoert 
Watch and learn as he talks you Chris Schmidt provides information on how to 
throu gh the process of slicin g your use Photoshop to create web-ready graphics 
images and compressing them lesson you'll even learn how to get 


further with Photoshop’s Save For started with your free Web templates. 
Web feature. In the last part of the More about these on the next page... 


VIEWING YOUR VIDEO TUTORIALS 


How to open up your QuickTime video lessons 


We've had several queries from readers who have struggled 
to gain access to the video tutorials on the disc, but ‘ = 
hopefully our new-look disc interface will make things much posotlld 
easier. To start up your videos, first click on the animated 
‘Click’ link, then choose Tutorials > Video Tutorials and click 
on ‘Open Video Tutorials Folder. This gives you direct access 
to the folder that contains your QuickTime files. 


To view the files you'll need to have the latest version of 


the QuickTime Player installed. If you don't already have it, 


Avisit to the QuickTime website will 
equip you with everything you need 
Then double-click the files to see Chris Schmidt in action. to view our video lessons. And it’s free! 


you can download it for free from the QuickTime website. 


www.apple.com/quicktime/download 
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Superb web template collection 


Dozens of templates and graphics 
from Seder Graphics and Layout Galaxy 


| hroughout this Focus Guide 
we’ve given you more than 


enough food for thought as to how 
you can put together your own 
designs and layouts as you start to 
build your own bespoke website. 
However, you may benefit further 
from seeing first-hand how 
professional designers put together 
such complex layered documents. 
We’ve been provided with a 
collection of layouts by two 
companies: Seder Graphics and 
Layout Galaxy. These companies 
specialise in creating generic page 


SEDER GRAPHICS 


So who are Seder Graphics anyway? 


Seder Graphics have provided us with 20 great page 
templates. They boast a client portfolio ranging from smal 
businesses to the US Navy, but it’s their template designs 
that have put them on the map.With their fourth CD now 
released, their templates support not only Photoshop but 
also Fireworks and Flash, and there are Dreamweaver 
templates currently being developed, which means you can 
develop your skills across various applications. If the free 
samples on the CD have inspired you, then why not head 
over to their site for more information. Or simply turn the 
page to see how to make use of their superb templates. 


www.sedergraphics.com 


templates for more experienced 
Photoshop users to adapt to their 
own websites. Layout Galaxy have 
also thrown in a number of buttons, 
icons and other useful elements that 
will add sparkle to any site. 

Open up your templates from the 
CD and you’ll see exactly how they 
have made use of guides, slices, 
masks, layers and more to create 
some stunning professional layouts. 
By pulling these templates apart 
you'll inevitably find some new 
techniques that you can apply to 
your own work. 


Missing fonts 

When you load up some of 
these templates be prepared 
to see error messages 
warning you of missing 
fonts. This will happen ifa 
particular design makes use 
ofa font that isn't installed 
‘on your system. The alert will 
give you the chance to 
substitute the missing font, 
or you could always go 
online and download 

the original. 


Sr 1 


More information on Seder Graphic’s 
services is available through via 
website. See below for the address 
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Using professional templates 


hostingIT.psd 

Dig out the hostingIT.psd 
template from the Seder 
Graphics folder on your CD 
and we'll explain over the 
following steps what you 
can expect to find in your 
free templates. 


Recolouring graphics 
If you like the general layout 
of a particular design but 
feel the colours aren't 
suitable, you can easily 
change these detail by 
locating the relevant layer 
and checking the lock 
transparency option within 
the Layers palette. If you 
now fill the entire layer with 
your preferred hue you'll 
find only the existing pixels 
will be coloured. 
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Open a sample template and familiarise 
yourself with the way these files are organised 
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a Open the hostingIT.psd file for a typical 
Photoshop template that could be used 
as an interface for a web hosting company. 
The strength behind such templates is that 
you have access to the layers used to create 
the layout. Look at the Layers palette and take 
a moment to familiarise yourself with the 
individual components available. 


q?] You can easily find, for example, where 
the heading graphic is located so if you 
choose to add your own imagery to the layout 
this becomes as simple as sourcing a 
replacement graphic and scaling to size 
before dragging it into the layer stack. You 
may need to hide the original graphic and 
carry out a little modification to the new one, 
but already half the job is done. 


Similarly, changing the text is a simple 
process, as the text layers remain fully 
editable, All that’s necessary is for you to 
select the text as you would normally and 
replace the content, You may experience an 
error message if fonts used by default aren't 
on your system, but you can easily replace 
these via the Character palette. 


fe] And once you've completed any 
changes and added your own content, 


you can revise any existing guides or slices to 
suit your end results. Just make sure the View 
> Extras option is checked as well as the View 
> Show > Slices option, and you'll be able to 
manipulate such existing elements using the 
Slice Select tool prior to exporting and saving 
your new page. 
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Glossary 


Glossary 


Don't let jargon slow you down. Here's our handy 
guide to essential terms found in this Focus Guide 


Anti-aliasing 

Moving pixels around can cause 
undesirable jagged edges to 
appear, where edited pixels have 
not blended smoothly together. 
Anti- aliasing refers to the process 
of smoothing out these jagged 
edges for a more natural look. 


Blending modes 

You use blending modes to 
determine how the pixels in 
a layer are blended with 
underlying pixels on other 
layers. By applying specific 
blend modes to individual 
layers, you can create a wide 
variety of special effects. 


Brush 

Brushes enable you to paint on 
Photoshop images with colour, 
other bits of images and pre- 
defined patterns. They mimic 
real brushes in that you can 
alter the size, hardness and 
texture in order to achieve the 
effects you want. 


Colour channel 

There are three colour channels 
in all colour images: red, green 
and blue. Each one contains 
information specific to that 
colour. Photoshop enables you 
to alter each channel 
independently, making it 
possible to reduce grainy blue 
skies without affecting the rest 
of an image, for example. 


Filter 

A filter is a preset tool within 
Photoshop, which applies an 
effect to an image (or a 
selection within the image). 
Some filters apply their effect in 
one click, while others offer 
more complex settings. Filter 
categories include Sharpen, 
Blur, Artistic and Stylize. Each 
of these offer further options via 


fly-out menus. For a complete 
list click in the Filter menu. 


-GIF (or .gif) 

A type of image file format best 
suited for producing simple 
images for the web. Examples 
include logos, banners, buttons 
and anything made up of only a 
few flat colours. 


Greyscale 

An image is greyscale if it 
contains no colour information. 
Almost all digital camera files, 
for instance, will be in colour. 
But you can turn them into 
black and white with many fine 
gradations of grey, from within 
Photoshop by turning them into 
greyscale images. 


Image size 

This refers to the physical size 
of an image. For instance, a 
photograph you are working on 
may be 20x15cm. This matters 
most when you come 

to printing out the image. 


.JPG (or jpeg) 

A type of image file format that 
gives a desirable combination of 
small file sizes and good quality 
photo reproduction. It is 
commonly used in digital 
cameras to store the images that 
you take. The small files sizes 
also make it ideal for the web. 


Layer 

Layers containing effects or 
elements of images can be 
stacked on top of the original 
image layer (the background) in 
order to change the appearance 
of the image. Layers do not 
directly affect the layers beneath 
them, in the same way that a 
blurry piece of glass placed 
over a photograph does not 
actually affect the photograph 


—in both cases, it is the 
appearance that is changed, 
leaving the original untouched. 


Marquee 

The flashing dotted outline that 
surrounds a selection. You'll 
also see it referred to in some 
places as ‘marching ants’. 


Rasterize 

When you ‘rasterize’a graphical 
element, you convert if from a 
vector to a pixel-based image. 

It will no longer be scalable like 
a vector, but can still be edited 
like other images in Photoshop. 


Resolution 

A measure of how many pixels 
make up an image. A resolution 
of 300dpi (dots per inch) is 
recognised as the minimum 

if you're intending to print 
your images. 72dpi is sufficient 
for images intended for the web. 


Selection 

Any part of an image which you 
select with Photoshop ’ tools, 
shown by a marquee around it. 
You can then work on certain 
parts of an image, or remove 
then without affecting the rest. 


Thumbnail 

A small, ‘thumbnail-sized’ 
version of an image. You'll find 
them in folders of images and 
in Photoshop’ File Browser. 
Because they're smaller than a 
full size image you can browse 
through them more quickly, 
which makes finding the file 
you're after far easier. 


Pixel 

An abbreviation for ‘picture 
element’, it is essentially a 
tiny dot of colour on screen. 
Most images are made of up 
millions of pixels, which 


combine to make an image look 
seamless. Zoom in very close 
on an image, however, or 
enlarge it to a high degree, 

and you can clearly see these 
individual pixels. 


Plug-in 

An piece of software that adds 
extra features to Photoshop — 
usually under the Filters menu. 
Plug-ins cannot work 
independently of Photoshop; 
they need to be added to 
Photoshop ’s ‘plug-ins’ folder 
before they will work. Often 
called ‘third party’ plug-ins, 
because they are developed by 
companies other than Adobe. 


PSD 

Photoshop’ own file format, 
which preserves elements such 
as layers and channels. If you're 
editing an image file, it’s 
sensible to save it as a PSD, in 
order for the changes you have 
made to remain editable when 
you next open it. 


Tool options bar 

When a tool is selected, the 
corresponding tool options bar 
automatically appears at the 
top of the Photoshop window, 
giving you access to various 
options relating to the tool, 
often including such things as 
Anti-aliasing and Feathering. 


Vector 

A ‘vector’ is a type of graphical 
element. In Photoshop graphics 
are usually ‘pixel-based’, which 
means they are difficult to 
manipulate without adversely 
affecting their image quality. 
The advantage of vectors is that 
they are ‘resolution 
independent’, so can be scaled 
up and down, and resized 
without loss of quality. 
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